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

【问题标题】：How to make image previews (thumbnails) using html/css如何使用 html/css 制作图像预览（缩略图）
【发布时间】：2014-03-21 07:27:19
【问题描述】：

http://jsfiddle.net/6rwUC/3/

正如您在 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;}

【问题讨论】：

标签： html css thumbnails

【解决方案1】：

如果 CSS3 是一个选项，您可以在水平和垂直方向使用 transform 和负的 translate 或 -50%，同时使用 left: 50% 和 top: 50% 定位元素，如下所示：

.image-column a img {
    position:relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

WORKING DEMO.

更新

根据您的更新：

我想调整图像大小以保持原始比例，只需剪切关闭覆盖父 div 的内容。

唯一的纯 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;
}

但是，如果 box 的 height/width 比率低于 image，您可以使用包含 max-width: 100%; 的旧答案作为图像：Online Demo.

如果box的height/width比例高于image，则图片需要使用max-height: 100%：Online Demo 。

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

【讨论】：

谢谢，但这正是我正在寻找的。如果您查看新示例 jsfiddle.net/6rwUC/9 ，我添加了不同尺寸的第三张图片，它只显示了其中的一小部分。我想要展示的是保持原始比例的调整大小的图像，只需切断覆盖父 div 的内容。比如这些缩略图：news.yahoo.com
好吧，你应该更新你的问题，因为：I would like the thumbnails to show only the center of their original images。
抱歉，我已经修复了它。
感谢您的详细解释。那么这里没有办法同时使用 max-width:100% 和 max-heigh:100% 吗？有些图像的比例可能较小，需要这个。
@user3187469 欢迎您。如果您同时使用它们，图像将始终小于框，并且不会覆盖整个空间。也就是说，你需要使用 JavaScript 来比较框和图像的比例，然后应用适当的 CSS 属性。

【解决方案2】：

试试这个：http://jsfiddle.net/6rwUC/4/ 我只是添加了max-width: 100%;

【讨论】：

这不是我想要的。我希望图像完全覆盖背景
并且预览显示图像的中心而不调整它的大小（在您的 jsfiddle 上，最后一个图像显示图像的顶部）。