html - last - Flexbox imagen escala a altura y mantener la relación de aspecto

flex html

Question

Tengo un DIV que se escala a la altura disponible utilizando CSS Flexbox. En este DIV hay una imagen que me gustaría escalar junto con el DIV en ambas dimensiones. Eso significa que se debe escalar manteniendo su relación de aspecto y las dimensiones que son menores que la dimensión DIV respectiva deben centrarse.

Puedo hacer que la imagen siga el ancho del DIV, pero no la altura. Por lo tanto, las imágenes de retratos escapan de los límites DIV.

Aquí hay un jsFiddle para demostrar el problema.

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box img {
  width: auto;
  height: auto;
  max-width: 90%;
  max-height: 90%;
}

<div class="container">
  <div class="box"></div>
  <div class="box" style="background: pink;">
    <img src="//dummyimage.com/300" />
  </div>
  <div class="box"></div>
</div>

Answer 1

Basado en la respuesta de @darrylyeo.

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: stretch;

  width: 100%;
  height: 100%;

  border-radius: 4px;
  background-color: hsl(0, 0%, 96%);
}

.box {
  border-radius: 4px;
  display: flex;
}

.box img {
  width: 100%;
  object-fit: contain;
  border-radius: 4px;
}

Answer 2

Cuando especifica la altura como un valor de porcentaje, es un porcentaje con respecto a la altura del elemento padre. También es cierto con la etiqueta <img> .

En este diseño de flexbox de altura desconocida, puede usar los trucos de position para hacer que la imagen se ajuste al ancho y la altura del elemento flex, y usar trucos de transform para centrar.

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.box:nth-child(2) {
  background: pink;
}
.box img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

<div class="container">
  <div class="box"></div>
  <div class="box">
    <img src="//dummyimage.com/300" />
  </div>
  <div class="box"></div>
</div>

También puede usar background imagen de background , que puede hacerla mucho más fácil, la clave es usar el valor contain . Vea la demostración simplificada a continuación.

jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.box {
  flex: 1 1 auto;
}
.box:nth-child(2) {
  background: pink url(//dummyimage.com/300) no-repeat center center / contain;
}

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

Answer 3

Elimine la etiqueta de la imagen y .box como fondo del div .box con background-size:cover;
jsfiddle 1

O, si quieres evitar el recorte:

Elimine la etiqueta de la imagen y .box como el fondo del div .box con background-size:contain;
jsfiddle 2

Answer 4

Si puedes cambiar de flex a block :

https://jsfiddle.net/svArtist/ug6eoxfs/

como @janfoeh señaló, usar object-fit: contener lo hace posible:

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow:hidden;
    position:relative;
}

.container {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: 100%;
}

.box {
    background: yellow;
    width: 100%;
    padding: 0 5%;
    box-sizing:border-box;
    max-width: 100%;
    height: 100%;
    max-height:100%;
    position:relative;
}

.box img {
    height:100%;
    max-height: 100%;
    width: auto;
    max-width: 100%;
    margin: auto;
    position:absolute;
    top:0%;
    bottom:0%;
    left:0%;
    right:0%;
    display:block;
    object-fit: contain;
}

Si necesita Flex Layout, como último recurso, podría considerar el uso de una imagen de fondo, lo que hace que todo sea realmente sencillo: https://jsfiddle.net/svArtist/e1c2tLme/

    background: url(http://placehold.it/300) no-repeat center center;
    background-size: contain;

Aparte de eso, no puedo encontrar una manera que no implique scripting.

Answer 5

Utiliza flexbox! ( JSFiddle )

body, html {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    flex-flow: column;
    width: 100%;
    height: 100%;
}

.box {
    flex: 1 1 auto;
    background: yellow;
    display: flex;
    justify-content: center;
    align-items: stretch;
}

.box img {
    width: 100%;
    object-fit: contain;
}

La clave es usar object-fit: contain; para mantener la relación de aspecto y align-items: stretch; para asegurarse de que la imagen no se corte a la izquierda ni a la derecha (¿podría tratarse de un error?).