0

El primer DIV que pongo genera el HEIGHT en base a la relación aspecto dada partiendo de WIDTH

Mientras que el Segundo se supone que que COLUMNS define el ancho de los hijos, pero parece que algo falla

.ratio {
  position: relative;
}

.ratio:before {
  content: '';
  display: block;
}

.ratio.r16-9:before {
  padding-top: 56.25%;
}

.ratio.r4-3:before {
  padding-top: 75%;
}

.ratio.r1-1:before {
  padding-top: 100%;
}
<head>

</head>

<body>
  <div style="width:160px;" class="ratio r16-9">Contenedor de 160px x 90px</div>

  <div style="columns:100px 3">
    <div class="ratio r16-9" style="width:inherit;">Contenedor de 0px x 0px</div>
  </div>
</body>

3
  • 3
    Hola user. Bienvenido a Stack Overflow en español. Por favor, lee el recorrido de bienvenida para aprender el funcionamiento básico del sitio. ¿Qué es lo que "algo falla"? Has de explicar mejor lo que intentas y por què no te sucede. Muestra como seria el resultado esperado. Mira Cómo preguntar para mejorar la calidad de tu pregunta. Un saludo
    – lois6b
    el 12 sep. 2017 a las 14:35
  • 1
    No acabo de entender lo que pides, si quieres que el primer DIV tenga 90px de alto debes ponerselo, ya que en tu CSS no le has puesto la altura en ningún lado
    – Pavlo B.
    el 12 sep. 2017 a las 15:29
  • Eso de que se genera el height en base al width no se de donde lo sacas. Por otra parte no sé que intentas con la propiedad columns, no define el ancho de los hijo como dices sino que divide en columnas el contenido
    – user7176
    el 12 sep. 2017 a las 16:21

2 respuestas 2

0

Lo más sano es asignar a cada uno de los hijos una clase como column y en esa clase asignar la altura fija.

en el CSS

.column {
  height: 100px;
}

.ratio {
  position: relative;
}

.ratio:before {
  content: '';
  display: block;
}

.ratio.r16-9:before {
  padding-top: 56.25%;
}

.ratio.r4-3:before {
  padding-top: 75%;
}

.ratio.r1-1:before {
  padding-top: 100%;
}

en el HTML

<div>
  <div class="column ratio r16-9">Contenedor</div>
</div>

Del mismo modo con el ancho, igual puedes utilizar flex que sería mucho más simple:

.flex-container {
  display: flex;
}


<div class="flex-container">
  <div>Caja de ancho variable</div>
  <div>Caja de ancho variable</div>
</div>
0

Gracias por responder, he avanzado en el código, la verdad es que me gusta flexbox, pero habia probado Grid donde podias dejar el control de columnas en el contenedor padre, pero como Grid no es muy funcional en Internet Explorer, vi que Columns tiene mejor soporte en Internet Explorer, pero Columns creo que falla en otros navegadores, se que puedes poner las clases directamente a los hijos, pero a veces se ponen las mismas clases a todos los hijos, y cuando se dan esos casos, es más comodo trabajar solamente sobre el padre, y que los hijos hereden las ordenes, en el caso de los Height he pensado en cuidar la relación aspecto para que si le cambio el tamaño se siga biendo proporcional, preocupandome así solamente por una medida y no andar a calcular una segunda

introducir la descripción de la imagen aquí

div{display:flex;;padding:.25em;background:white;} figure{border:1px solid red;} .ratio.r3-5 figure:before {padding-top: 166.66%;} .center{justify-content:center;} .around{justify-content:space-around;} .between{justify-content:space-between;} .basis6 figure{flex-basis:6em;} .basis8 figure{flex-basis:8em;} .basis10 figure{flex-basis:10em;}


Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.