html - 如何在保持宽高比的同时在 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>