将图像原始大小保持在较小的 div 内答案

【问题标题】：Keep image original size inside smaller div将图像原始大小保持在较小的 div 内
【发布时间】：2022-03-14 21:39:51
【问题描述】：

我有一个 600x400 像素的图像，并希望将其放在一个 240x200 像素的较小 div 中，但图像会缩小或变形。我希望原始大小的图像以较小的 div 为中心，这会隐藏一些图像

我编写了这个 CSS 规则以适用于不同的图像尺寸。

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

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

【问题讨论】：

我要问，你为什么不使用像 GIMP 或 PhotoShop 这样的程序来调整图像的大小，这样你就不用担心失真等问题了？
因为我不想创建很多缩略图，所以这个 div 上显示的图像是指向主要文章的链接。

标签： image css css-transforms

【解决方案1】：

如果您为图像指定 100% 大小。然后，您的图像将占用其容器的 100%。

您想要的是将文件保持在其原始大小，因此不要为您的图像指定任何大小。

overflow:hidden 是只显示图像的一部分的关键。

如果您想让图像的中心始终可见，您应该看看这个 CSS3 属性transform:translate(-50%,-50%) 并具有适当的定位。

看看这个jsfiddle，告诉我它是否可以帮助你。

编辑：使用 2020 现代浏览器，查看CSS object-fit property 可能会很有用。特别是object-fit: cover;。看看这个更新的jsfiddle。

【讨论】：

@Nicoli 另见：Image Auto Resize

【解决方案2】：

要保持纵横比，只调整一个维度，浏览器会调整另一个维度以保持纵横比。根据您提供的尺寸，您需要设置适合容器的高度（而不是宽度），以免有任何间隙：

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

示例：jsfiddle

【讨论】：

我试过了，但是图像变形了，看起来它只是在高度上缩放。
如果只给出一个维度，它不应该被扭曲，但是，它会被裁剪（但考虑到维度，这是不可避免的）。我在答案中添加了一个 jsfiddle 示例。
这个解决方案也是正确的，但是morgul的解决方案帮助我理解了发生了什么，无论如何，谢谢你们！
我意识到我的解决方案，就目前而言，不会使图像居中。如果图像尺寸保持不变，那么您可以将margin-left:-30px（或使用百分比）应用于img 以使其居中。 +1 对 morgul 的解决方案，我认为使用 transform:translate(-50%) 将是解决此问题的更好方法（提供浏览器支持就足够了），因为它似乎与任何图像尺寸无关。

【解决方案3】：

如果您为图像指定 100% 大小。然后，您的图像将占用其容器的 100%。为了保持实际大小，您应该编写这样的内联样式：样式=“宽度：自动”

【讨论】：