web-dev-qa-db-fra.com

Maintenir le rapport hauteur / largeur avec la hauteur / largeur min / max?

J'ai une galerie sur mon site où les utilisateurs peuvent télécharger des images.

Je voudrais que les images soient assis dans un div qui maintient sa hauteur, les images ne doivent pas dépasser 500px de hauteur. La largeur doit être automatique pour conserver les proportions.

HTML:

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

J'ai essayé ce CSS:

#gallery{
    height: 500px;

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

Ce qui précède fonctionne bien, la galerie mesure toujours 500 px de hauteur et les images ne dépassent jamais 500 px de hauteur. Je rencontre cependant des problèmes avec des images plus petites, si un utilisateur télécharge une très petite image, je voudrais qu'elle soit "gonflée" à un minimum de 200 pixels. Je sais que cela peut être réalisé en définissant un min-height sur l'image, le problème est que si l'image est inférieure à 200 px de hauteur mais disons 2000 px de large, l'image est gonflée jusqu'à 200 px de hauteur, mais le rapport d'aspect est vissé, car l'image est plus large que les images parent div.

Comment puis-je avoir une hauteur minimale tout en conservant les proportions?

htmlcsssassaspect-ratio
21
panthro

La propriété que vous recherchez est object-fit. C'est l'une des innovations d'Opera, vous pouvez en savoir plus à ce sujet dans leur article de développement 2011 sur l'ajustement d'objet (oui, ça fait si longtemps). Il y a quelques années, je n'aurais pas pu vous le recommander, mais caniuse montre que tout le monde commence à se rattraper:

  • Opera 10.6-12.1 (préfixe -o-)
  • 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;
}

L'utilisation d'une valeur de contain forcera l'image à conserver son rapport hauteur/largeur quoi qu'il arrive.

Alternativement, vous pouvez utiliser ceci à la place:

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

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

30
cimmanon

La seule façon que je sache d'accomplir cela est de définir width ou height sur auto.

#gallery{
    height: 500px;

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

J'avais l'intention de faire quelque chose de similaire, en fait. Voici quelque chose dans jQuery si vous êtes dedans.

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

1
Dustin

Je ne sais pas si cela est possible en utilisant uniquement CSS.

Cependant, vous pourrez peut-être accomplir la même chose avec quelques lignes 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';
  }
}

Cela définit la hauteur de toutes les images entre 200 et 500 pixels. La largeur sera automatiquement mise à l'échelle.

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>
1
Rick Hitchcock