Question

正如您在jsfiddle链接上看到的，我正在尝试为图像预览创建一个布局。我希望保持原始比例的重新调整大小的图像，只是切断父div的覆盖。我怎么能这样做？

.image-column {
background: #cecece;
width: 100%;
height: 180px;
overflow: hidden;}

.image-column a img {
position:relative;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;}

Answer 1

如果CSS3是一个选项，您可以使用transform水平和垂直translate为-50%水平和垂直，而元素的位置为left: 50%和{{1如下：

top: 50%

<强> WORKING DEMO

更新

根据您的更新：

我想调整保持原始比例的图像，只需剪切关闭什么覆盖父div。

当您使用.image-column a img { position:relative; left: 50%; top: 50%; transform: translate(-50%, -50%); }时，唯一纯CSS解决方案是使用background-image元素作为<a>元素：

background-size: cover;

<div class="image-column">
    <a href="#"></a>
</div>

但是，如果框的.image-column a { display: block; height: 100%; background: url(http://domain.com/path/to/image.jpg) 50% 50% no-repeat; background-size: cover; }比率低于图片，则可以使用旧的答案，包括height/width图片： Online Demo 。

如果框的max-width: 100%;比率高于图片，则需要使用height/width作为图片： Online Demo

对于动态计算，您需要使用JavaScript。这是similar topic on SO。

Answer 2

试一试：http://jsfiddle.net/6rwUC/4/ 我刚刚添加了max-width: 100%;

如何使用html / css制作图像预览（缩略图）

2 个答案:

更新