pixeles - mantener relacion aspecto css

Mantener la relación de aspecto div de acuerdo con la altura

Question

Necesito mantener el ancho de un elemento como un porcentaje de su altura . Entonces, a medida que cambia la altura, el ancho se actualiza.

Lo contrario se puede lograr mediante el uso de un valor% para padding-top, pero padding-left como porcentaje será un porcentaje del ancho de un objeto, no su altura.

Entonces con un marcado como este:

<div class="box">
  <div class="inner"></div>
</div>

Me gustaría usar algo como esto:

.box {
    position: absolute;
    margin-top: 50%;
    bottom: 0;
}
.inner {
    padding-left: 200%;
}

Para garantizar que la relación de aspecto de la caja se mantenga de acuerdo con su altura . La altura es fluida debido a su margen de porcentaje: a medida que cambia la altura de la ventana, la altura de la caja también lo hará.

Sé cómo lograr esto con JavaScript, ¿solo me pregunto si hay una solución limpia solo para CSS?

Answer 1

El truco de CSS que escribiste funciona bastante bien para mantener la relación width / height en un elemento. Se basa en la propiedad de padding que, cuando su valor es en porcentaje, es proporcional al ancho principal, incluso para padding-top y padding-bottom .

No existe una propiedad CSS que pueda establecer un tamaño horizontal proporcionalmente a la altura principal. Así que creo que no hay una solución CSS limpia.

Answer 2

Hay otra forma más eficiente de lograr una relación de aspecto constante según la altura.

Puede colocar un svg vacío para que no tenga que cargar una imagen externa.

Código HTML:

    <svg xmlns="http://www.w3.org/2000/svg"
      height="100"
      width="200"
      class=''placeholder-svg''
    />

Código CSS:

.placeholder-svg {
  width: auto;
  height: 100%;
}

Cambie el ancho / alto para lograr la relación de aspecto deseada.

Tenga en cuenta que el svg podría desbordarse.

http://www.w3.org/2000/svg es solo un espacio de nombres. No carga nada.

Si cambia la clase placeholder-svg a:

.placeholder-svg {
  width: 100%;
  height: auto;
}

entonces la altura se ajusta según el ancho.

El ancho de demostración 1 se ajusta de acuerdo con la altura y la relación de aspecto 2: 1.

Demo 2 igual que el anterior, pero puede cambiar el tamaño fácilmente (usa React)

Answer 3

No puedo encontrar una solución CSS pura. Aquí hay una solución que usa la biblioteca JavaScript de CSS Element Queries .

var aspectRatio = 16/9;
var element = document.querySelector(''.center'');
function update() {
  element.style.width = (element.clientHeight * aspectRatio) + ''px'';
}

new ResizeSensor(element, update);
update();

Demo de CodePen!

Answer 4

Puede usar una imagen que tenga las proporciones deseadas para ayudar con el tamaño proporcional (las imágenes se pueden escalar proporcionalmente estableciendo una dimensión en algún valor y otra en automático). La imagen no tiene que ser visible, pero debe ocupar espacio.

.box {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50%;
}
.size-helper {
  display: block;
  width: auto;
  height: 100%;
}
.inner {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 153, .8);
}

<div class="box">
  <img class="size-helper" src="//dummyimage.com/200x100/999/000" width="200" height="100">
  <div class="inner">
    1. box has fluid height<br>
    2. img has 2:1 aspect ratio, 100% height, auto width, static position<br>
    2.1 it thus maintains width = 200% of height<br>
    2.2 it defines the dimensions of the box<br>
    3. inner expands as much as box
  </div>
</div>

En el ejemplo anterior, box, inner y helper son todos del mismo tamaño.

Answer 5

Puede usar unidades vh para la altura y el ancho de su elemento para que ambas cambien de acuerdo con la altura de la ventana gráfica .

vh 1/100 de la altura de la ventana gráfica. ( MDN )

DEMO

.box {
    position: absolute;
    height:50vh;
    width:100vh;
    bottom: 0;
    background:teal;
}

<div class="box"></div>