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

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 是显示图像的一部分的关键.

如果您希望始终可以看到图像的中心,则应该transform:translate(-50%,-50%)通过正确的定位来查看此CSS3属性.

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