Html 纯 CSS 图像缩略图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6131049/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pure CSS image thumbnails
提问by Will McCutchen
I want to display a collection of image thumbnails in a grid. The images will come in a variety of sizes, but I'd like to restrict the thumbnails to a particular size (let's say 200pxwide and 150pxtall).
我想在网格中显示一组图像缩略图。图像有多种尺寸，但我想将缩略图限制为特定尺寸（比如200px宽和150px高）。
What I'd like to find are some magical HTML markup and CSS rules that will
我想找到一些神奇的 HTML 标记和 CSS 规则，它们将
- Allow the images to be included in normal
<img>elements - Ensure that the thumbnails fit into their 200x150 pixel box, retain their proportions, and are centered in whichever dimension they overflow.
- Not require JavaScript or specific knowledge of each image's actual dimensions
- 允许图像包含在普通
<img>元素中 - 确保缩略图适合它们的 200x150 像素框，保持它们的比例，并在它们溢出的任何维度上居中。
- 不需要 JavaScript 或每个图像的实际尺寸的特定知识
I'm not sure if this is possible. I can make a (bad) approximation of what I want with the following markup:
我不确定这是否可能。我可以使用以下标记对我想要的内容进行（坏）近似：
<div class="thumb">
<img src="360x450.jpeg">
</div>
and CSS:
和 CSS：
.thumb {
width: 200px;
height: 150px;
overflow: hidden;
}
.thumb img {
min-width: 200px;
min-height: 150px;
width: 200px;
}
This attempt breaks in a variety of ways:
这种尝试以多种方式中断：
Images that are in portrait orientation will be sized correctly, but will overflow through the bottom of the container, resulting in vertically-off-center cropping.
Images that are wide and short will be distorted in the horizontal dimension because of the hard-coded
widthandmin-heightrules.But without that hard-coded
width, images that are larger than the minimum height and width will not be resized at all.
纵向图像的大小将正确，但会溢出容器底部，导致垂直偏离中心的裁剪。
由于硬编码
width和min-height规则，宽和短的图像在水平维度上会失真。但是没有那个硬编码
width，大于最小高度和宽度的图像根本不会被调整大小。
If it's at all helpful, I've put up an example that will (hopefully) illustrate what I'm trying to do, here:
如果它有帮助，我已经举了一个例子来（希望）说明我正在尝试做的事情，在这里：
I know that I can solve this problem by omitting the <img>element altogether and instead pulling the thumbnails in as a centered background image on the containing element, but, if it's possible, I'd like to keep the <img>elements in the page.
我知道我可以通过<img>完全省略元素来解决这个问题，而是将缩略图作为包含元素上的居中背景图像拉入，但是，如果可能的话，我希望将<img>元素保留在页面中。
Thanks for any help or pointers you can provide!
感谢您提供的任何帮助或指示！
Edit:I suppose I should note that an ideal solution will work in IE 6+ and modern browsers, but any solution that works in IE 9+ and other modern browsers (recent WebKit, Gecko, etc.) will be gladly accepted.
编辑：我想我应该注意到一个理想的解决方案将适用于 IE 6+ 和现代浏览器，但任何适用于 IE 9+ 和其他现代浏览器（最近的 WebKit、Gecko 等）的解决方案都将被欣然接受。
采纳答案by bpeterson76
Possible, probably.
可能，大概。
Also, probably not the best idea. Your big issue to overcome here is orientation of thumbnails. What if you're dealing with a panorama? Certainly, shrinking it down is going to create a very unsightly "squished" image, as would a very tall image. It's rare that everyone deals in 4X3 or 16X9 100% of the time. So, you'll need a mechanism to pad out the image. Even if the ratio is correct, it's not going to resize as cleanly as you could with a program like Photoshop or Gimp.
此外，可能不是最好的主意。这里要克服的大问题是缩略图的方向。如果你正在处理全景呢？当然，缩小它会产生一个非常难看的“压扁”图像，一个非常高的图像也是如此。每个人都 100% 地以 4X3 或 16X9 进行交易的情况很少见。因此，您需要一种机制来填充图像。即使比例正确，它也不会像使用 Photoshop 或 Gimp 之类的程序那样干净地调整大小。
The other major issue in this thought process is that you're going to be sending massive amounts of unnecessary data to the server via the larger images. It'll take longer to load, fill up the DOM unnecessarily, and overall just inhibit the UI experience.
此思考过程中的另一个主要问题是，您将通过较大的图像向服务器发送大量不必要的数据。加载时间会更长，不必要地填充 DOM，并且总体上只会抑制 UI 体验。
There are a number of ways to get around this, none of them pure CSS. I've tackled this several times, each in a unique way based on the client. For one client that wanted things totally custom, it was a custom uploader, resizing via iMagick (part of image magic) and custom CSS/Javascript for the album with major interactivity. In another instance, I use Galleryas the backend--handling the thumbnail creation, uploading, titling, cropping, and organizing-- and then just pulled the reformatted image links out of the DB to display them in a more appealing manner. You could save yourself even more trouble and just use something like the Flickr api to pull images for your use.
有很多方法可以解决这个问题，但没有一个是纯 CSS。我已经多次解决这个问题，每次都以基于客户的独特方式解决。对于一个想要完全自定义的客户来说，它是一个自定义上传器，通过 iMagick（图像魔术的一部分）和自定义 CSS/Javascript 调整大小，具有主要的交互性。在另一个例子中，我使用图库作为后端——处理缩略图的创建、上传、标题、裁剪和组织——然后只是将重新格式化的图像链接从数据库中拉出，以更吸引人的方式显示它们。你可以省去更多的麻烦，只需使用类似 Flickr api 的东西来提取图像供你使用。
Here's a tut on using ImageMagick to do thumbnails.
回答by drudge
You can (kind of) achieve this with the CSS3 background-sizeadditions: containand cover.
您可以（有点）通过 CSS3background-size添加来实现这一点：contain和cover.
contain(top picture) fits the entire image, keeping aspect ratio. Nothing is cropped.cover(bottom picture) fills the containing element either vertically or horizontally (depending on the image) and crops the rest.
contain（上图）适合整个图像，保持纵横比。什么都没有裁剪。cover（底部图片）垂直或水平填充包含元素（取决于图像）并裁剪其余元素。
回答by buhbang
.thumb img {
max-width: 200px;
max-height: 150px;
min-width: 200px;
min-height: 150px;
}
Well I know for thumbs you would want it max and min if you want a smaller image to make it bigger and bigger image to make it smaller.
好吧，我知道如果你想要一个较小的图像使它变得更大和更大的图像使它更小，你会想要最大和最小。
回答by cmplieger
try to set max-width and height and not min because if the image is not exactly that size it will overflow :)
尝试设置最大宽度和高度而不是最小，因为如果图像不是那个大小，它会溢出:)
