html - query - ¿Manteniendo la relación de aspecto con min/max altura/anchura?

css width equal to height

Question

Tengo una galería en mi sitio donde los usuarios pueden subir imágenes.

Me gustaría que las imágenes se sentaran en un div que mantenga su altura, las imágenes no deberían tener más de 500 px de altura. El ancho debe ser automático para mantener la relación de aspecto.

HTML:

<div id="gallery">
    <img src="uploads/my-dynamic-img.jpg">
</div>

He probado este CSS:

#gallery{
    height: 500px;

    img{
        max-height: 500px;
        max-width: 100%;
    }
}

Lo anterior funciona bien, la galería siempre tiene 500 píxeles de alto y las imágenes nunca superan los 500 píxeles de altura. Sin embargo, me encuentro con problemas con imágenes más pequeñas, si un usuario carga una imagen muy pequeña, me gustaría que esté "inflada" a un mínimo de 200px. Sé que esto se puede lograr estableciendo una min-height en la imagen, el problema con esto es que si la imagen tiene menos de 200 px de altura pero, digamos, 2000px de ancho, la imagen se sopla hasta 200px de altura, pero luego La relación de aspecto está atornillada, ya que la imagen es más ancha que la div.

¿Cómo puedo tener una altura mínima pero conservar la relación de aspecto?

Answer 1

He querido hacer algo similar, en realidad. Aquí hay algo en jQuery si te gusta eso.

SCSS:

#gallery {
  height: 500px;

  img {
    max-height: 100%;
  }

  .small {
    width: 100%;
    max-width: 500px;
    height: auto;
  }

  .regular {
    width: auto;
    min-height: 200px;
  }
}

jQuery:

$( ''img'' ).each( function() {

  var imageWidth = parseFloat( $( this ).css( ''width'' ) );
  var imageHeight = parseFloat( $( this ).css( ''height'' ) );

  if( imageHeight <= 200 && imageWidth >= 200 ) {
    $( this ).addClass( ''small'' );
  }
  else {
    $( this ).addClass( ''regular'' );
  }
});

CodePen

Answer 2

La única forma que conozco para lograr esto es establecer el width o el height en auto .

#gallery{
    height: 500px;

    img{
        max-height: 500px;
        width: auto;
    }
}

Answer 3

La propiedad que está buscando es object-fit . Esta es una de las innovaciones de Opera, puede leer más sobre esto en su artículo de dev de 2011 sobre el ajuste de objetos (sí, ha existido tanto tiempo). Hace unos años, no habría podido recomendarlo, pero no puedo demostrar que todos los demás están empezando a ponerse al día:

• Opera 10.6-12.1 (-o- prefijo)
• Chrome 31+
• Opera 19+
• Safari 7.1+
• iOS 8+
• Android 4.4+

http://caniuse.com/#search=object-fit

#gallery img {
    -o-object-fit: contain;
    object-fit: contain;
}

Usar un valor de contain forzará a la imagen a mantener su relación de aspecto sin importar qué.

Alternativamente, podrías querer usar esto en su lugar:

#gallery img {
    -o-object-fit: cover;
    object-fit: cover;
    overflow: hidden;
}

http://sassmeister.com/gist/9b130efdae95bfa4338e

Answer 4

No sé si esto es posible usando solo CSS.

Sin embargo, puede lograr lo mismo con unas pocas líneas de JavaScript:

var img= document.querySelectorAll(''img'');
for(var i = 0 ; i < img.length ; i++) {
  img[i].onload= function() {
    var h= this.naturalHeight;
    h= Math.min(500,Math.max(200,h));
    this.style.height= h+''px'';
  }
}

Esto establece la altura de todas las imágenes entre 200px y 500px. El ancho se escalará automáticamente.

var img= document.querySelectorAll(''img'');
for(var i = 0 ; i < img.length ; i++) {
  img[i].onload= function() {
    var h= this.naturalHeight;
    h= Math.min(500,Math.max(200,h));
  }
}

#gallery{
  height: 500px;
  width: 400px;
  overflow: hidden;
}

<div id="gallery">
  <img src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo-med.png">

</div>