Le rapport hauteur/largeur de l'image dans l'image

Question

J'ai une image avec une légende comme celle-ci :

titre

J'ai aussi img{max-width:100%} 
Je souhaite définir à la fois la largeur et la hauteur d'une image et conserver ses proportions lorsque la largeur diminue en dessous de sa valeur définie. J'ai donc essayé un code comme celui-ci : 


titre

C'est à peu près ce que je souhaite, mais lorsque l'image est en "letterbox", le titre est assez éloigné du bas de l'image. 
Existe-t-il un moyen d'obtenir les résultats souhaités tout en gardant le titre bien en bas de l'image ? 

Answer 1

Si vous utilisez object-fit: contain，那么图像的原始宽高比已经被保留，因为整个图像必须适应其父元素。所以，如果图像原始宽度为100px，高度为150px，并且您将图像设置为width: 100px和height: 200px，图像的高度仍然为150px，但是在figure, un espace supplémentaire de 25 pixels sera ajouté en haut et en bas de l'élément.

Pour résoudre ce problème, il vous suffit de régler la hauteur sur "auto".

img {
  // 为了可读性，将您的样式声明移到这里
  width: 100px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

Maintenant, si vous souhaitez réellement définir la largeur et la hauteur et forcer l'image à s'adapter à ces dimensions, vous devez utiliser autre chose que la largeur/hauteur de l'élément object-fit: contain之外的其他方法。您可以在这里了解其他选项，但也许您想设置figure et laisser l'image remplir cet espace. Dans ce cas vous pouvez faire ceci :

figure {
    display: block;
    width: 100px;
    max-width: 100%;
    height: 200px;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: blue;
}