如何在CSS中保持宽高比的情况下放大图像？

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容器停止缩放，然而，我想对其进行超出本地分辨率的升级。

有什么好的想法吗？

- Nero296

---

你尝试过使用object-fit: cover;吗？ - N'Bayramberdiyev

@N'Bayramberdiyev 哇塞，谢谢！现在它运行得非常好。 - Nero296

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>

- N'Bayramberdiyev

---

在我的这一端，有一个小问题。每当我尝试调整浏览器窗口大小时，都会出现这个无法解释的小间隙。 - Nero296

忽略我之前的评论。那是代码的其他部分。这个解决方案很好。 - Nero296

忽略我之前的评论。那是代码的其他部分。这个解决方案很好。 - Nero296

Answer 2

首先，如果您想保持宽高比，请使用auto来设置高度。只需设置宽度即可。其次，在您的示例中，因为您在父元素上设置了高度和宽度，所以图片最多只能“增长”到这个大小。它停止增长不是因为其本身的尺寸，而是因为其父元素的尺寸。

- billk

---

好的，我已经尝试将父元素设置为100％宽度和特定高度，并对IMG使用自动宽度和高度。问题是，现在我的图像在延伸到屏幕宽度的100％之前就停止了。高度如预期。 - Nero296

不，应该是 width: 100% 和 height: auto。当图像到达父元素的边界之一时，它将停止，除非img和parent具有相同的比例。如果您想填充div，请使用 object-fit: cover，就像有人说的那样，但如果它们不是相同的比例，这将切掉您图像的一部分。 - billk