Question

我的图像是600x400px，并希望它在240x200px的较小div中，但图像会缩小或变形。我希望原始大小的图像以较小的div为中心，这会隐藏一些图像

我写了这个CSS规则以应用于不同的图像大小。

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

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

Answer 1

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

您想要的是将文件保持原始大小，因此请勿为图片指定任何尺寸。

overflow:hidden是仅显示图片的一部分的关键。

如果您希望始终显示图像的中心，则应该以适当的位置查看此CSS3属性transform:translate(-50%,-50%)。

看看这个jsfiddle并告诉我它是否可以帮到你。

Answer 2

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

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

示例：jsfiddle

Answer 3

如果为图像指定100％大小。然后您的图像将占据其容器的100％。为了保持实际大小，你应该写一个这样的内联样式： style =“width：auto”

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

3 个答案: