Le rapport hauteur/largeur de l'image dans l'image
P粉5579579702023-08-17 20:24:04
0
1
417
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 ?
Si vous utilisezobject-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".
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émentobject-fit: contain之外的其他方法。您可以在这里了解其他选项，但也许您想设置figureet laisser l'image remplir cet espace. Dans ce cas vous pouvez faire ceci :
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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之外的其他方法。您可以在这里了解其他选项，但也许您想设置figureet 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; }