如何使用html/css进行图像预览（缩略图）

正如您在JSFIDLE链接上看到的，我正在尝试为图像预览创建一个布局。我想调整图像的大小以保持原始比例，只需切断覆盖父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;}

试试这个：

---

我只是简单地添加了

最大宽度：100%

如果CSS3是一个选项，您可以在水平和垂直方向上使用

-50%

的负

translate

，而元素的位置为

左：50%

和

上：50%

，如下所示：

。图像列a img{
位置：相对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}

更新 根据您的更新：

我想有大小的图像保持原来的比例，只是削减 关闭覆盖父div的内容

唯一的纯CSS解决方案是将图像用作

的
背景图像

如果框的
高度/宽度
比率高于图像，则需要对图像使用
最大高度：100%

对于动态计算，您需要使用JavaScript。这是一个。
但这不是我想要的。我希望图像完全覆盖背景，预览显示图像的中心，而不调整其大小（在您的JSFIDLE上，最后一张图像显示图像的顶部）。谢谢，但这正是我现在要寻找的。若你们看一个新的例子，我添加了不同大小的第三张图片，它只显示了其中的一小部分。我想显示的是调整大小的图像，保持原始比例，只需切断覆盖父div的部分。例如：好吧，你应该更新你的问题，因为：
我希望缩略图只显示原始图像的中心。
。关于混淆，我现在已经修好了。谢谢你的详细解释。所以这里没有办法同时使用最大宽度：100%和最大高度：100%吗？某些图像可能具有较小的比率，因此需要该比率。@user3187469欢迎使用。如果两者都使用，图像将始终比长方体小，并且不会覆盖整个空间。也就是说，您需要使用JavaScript来比较框和图像的比率，然后应用适当的CSS属性。
<div class="image-column">
    <a href="#"></a>
</div>