如何在保持宽高比的同时升级CSS中的Img？

Question

谷歌搜索了一下之后，我发现了

HTML

<div class="divContainer">
    <img src="image.png">
<div>

CSS

.divContainer{
   width :200px;
   height:200px;
   border:solid;
 }

img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

这很好用，但只能缩放到达到原始图片的原始分辨率，然后停止使用div容器缩放，但我希望它继续进行并超出其原始分辨率进行缩放。

有什么想法吗？

Answer 1

将object-fit: contain;更改为object-fit: cover;。

.divContainer {
   width: 700px; /* Bigger than image's width. */
   height: 500px; /* Bigger than image's height. */
   border: solid;
 }

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

<div class="divContainer">
    <img src="https://dotjpg.co/YfUB.jpg"> <!-- Image Dimensions: 640px x 426px -->
<div>

Answer 2

首先，如果要保持宽高比，应使用auto作为高度。只需设置宽度。其次，在您的示例中，因为您在父元素上设置了高度和宽度，所以img可以“增长”。它之所以停止不只是因为其原始大小，而是因为其父项的大小。