Maintenir le ratio d'aspect avec min / max hauteur / largeur?
J'ai une galerie sur mon site où les utilisateurs peuvent télécharger des images.
Je voudrais que les images de s'asseoir dans un div, qui conserve sa hauteur, les images devraient pas être supérieure à 500 px de hauteur. La largeur doit être automatique pour maintenir le ratio d'aspect.
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%;
}
}
Ci-dessus fonctionne bien, la galerie est toujours 500px de haut et les images ne jamais dépasser 500 px de hauteur. Je rencontre des problèmes mais avec des images plus petites, si un utilisateur télécharge une petite image, j'aimerais qu'il 'sauter' à un minimum de 200px. Je sais que cela peut être atteint par la création d'un min-height
sur l'image, le problème avec ceci est que, si l'image est de moins de 200px de hauteur, mais dire, 2000px de large, l'image saute à 200px de hauteur, mais, le rapport d'aspect est foutu, car l'image est plus large que les images div parent.
Comment puis-je avoir une hauteur min, mais de conserver les proportions?
source d'informationauteur panthro
Vous devez vous connecter pour publier un commentaire.
La propriété que vous recherchez est
object-fit
. C'est l'un des Opéra innovations, vous pouvez en lire plus à ce sujet dans leur 2011 dev article sur l'objet-fit (oui, c'est depuis longtemps). Il y A quelques années, je n'aurais pas été en mesure de recommander à vous, mais caniuse montre que tout le monde commence à rattraper:http://caniuse.com/#search=object-fit
À l'aide d'une valeur de
contain
force l'image de maintenir son ratio d'aspect de n'importe quoi.Alternativement, vous pouvez utiliser ce lieu:
http://sassmeister.com/gist/9b130efdae95bfa4338e
Le seul moyen que je connaisse pour éventuellement le faire est par la configuration soit les
width
ouheight
àauto
.J'ai eu l'intention de faire quelque chose de similaire, en fait. Voici quelque chose en jQuery si vous êtes dans ce.
SCSS:
jQuery:
CodePen