在较小的div中保持图像原始尺寸

Question

我有一张尺寸为600x400像素的图片，想将其放入一个尺寸为240x200像素的小div中，但是图片会缩小或变形。我希望原始尺寸的图片居中显示在小div中，这样就可以隐藏部分图片。

我编写了以下CSS规则来适用于不同大小的图片。

.theBox {
   float: left;
   overflow: hidden;
   width: 240px;
   height: 200px;
}

.theBox img {
   display: block;
   height:100% !important;
   width:100% !important;
 }

- Nicoli

---

我必须问一下，为什么你不使用像GIMP或PhotoShop这样的程序来调整图像大小，这样你就不需要担心失真等问题了呢？ - eyoung100

因为我不想创建大量的缩略图，所以在此div中显示的图片是指向主要文章的链接。 - Nicoli

Answer 1

如果您为图像指定了100％的大小，则该图像将占据其容器的100％。

您想要的是保持文件的原始大小，因此不要指定任何图像大小。 overflow:hidden 是仅显示图像一部分的关键。

如果您希望始终看到图像的中心，请查看具有适当定位的CSS3属性 transform:translate(-50%,-50%)。

请查看此 jsfiddle，并告诉我它是否能帮助您。

---

编辑：对于2020年的现代浏览器，查看CSS object-fit属性可能会很有用。特别是object-fit: cover;。请查看此更新的jsfiddle。

---

.imageParent, .imageParentCover {
    position: relative;
    text-align: center;
    width: 200px;
    height: 200px;
    overflow: hidden;
}

/* Solution using `transform: translate`: */
.imageParent img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

/* Solution using `object-fit: cover`: */
.imageParentCover img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

Solution using <code>transform: translate</code>:
<div class="imageParent">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png" />
</div>

<hr />

Solution using <code>object-fit: cover</code>:
<div class="imageParentCover">
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/640px-Google_2015_logo.svg.png" />
</div>

- service-paradis

---

@Nicoli 参见：图像自动调整大小 - eyoung100

Answer 2

为了保持比例，只需调整一个维度的大小，浏览器将调整另一个维度以保持比例。根据您提供的尺寸，您需要设置高度以适应容器（而不是宽度），以避免任何间隙。

.theBox img {
    display: block;
    height: 100%;
}

例子：jsfiddle

- w3d

---

我尝试过了，但图像变形了，看起来只是在高度上缩放了。 - Nicoli

如果只给定一个尺寸，它不应该被扭曲，但是它会被裁剪（这是由于尺寸所导致的，不可避免）。我已经在我的答案中添加了一个jsfiddle示例。 - MrWhite

这个解决方案也是正确的，但来自morgul的那个帮助我理解了发生了什么，无论如何，谢谢你们两个！ - Nicoli

我意识到我的解决方案目前没有将图像居中。如果图像的尺寸保持不变，你可以在img上应用margin-left:-30px（或使用百分比）来实现居中。对于morgul的解决方案给予+1，我认为使用transform:translate(-50%)会是更好的解决方式（只要浏览器支持足够），因为它似乎与任何图像尺寸无关。 - MrWhite

Answer 3

你的容器应该有 overflow: hidden;。使用 object-fit 属性缩小你的图片。

.imageContainer{
    width: 100px;
    height: 100px;

    // align center the image
    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;
}

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

- MANISH PRAJAPATI

Answer 4

如果您为图像指定100％的大小，则该图像将占据其容器的100％。为了保持实际大小，您应编写内联样式，如下所示： style="width: auto"

- rahgozar