纯CSS图片缩略图

| 我想在网格中显示图像缩略图的集合。图像将具有各种尺寸,但是我想将缩略图限制为特定的尺寸(例如,宽
200px
,高
150px
)。 我想找到的是一些神奇的HTML标记和CSS规则 允许将图像包含在常规
<img>
元素中 确保缩略图适合其200x150像素的框,保持其比例,并在溢出的任何尺寸中居中。 不需要JavaScript或每个图像的实际尺寸的特定知识 我不确定是否可行。我可以使用以下标记大致(理想)地找到所需的内容:
<div class=\"thumb\">
    <img src=\"360x450.jpeg\">
</div>
和CSS:
.thumb {
    width: 200px;
    height: 150px;
    overflow: hidden;
}
.thumb img {
    min-width: 200px;
    min-height: 150px;
    width: 200px;
}
此尝试以多种方式中断: 纵向图像的尺寸将正确调整,但会从容器底部溢出,从而导致垂直偏心裁切。 由于硬编码的
width
min-height
规则,宽和短的图像在水平方向上都会失真。 但是,如果没有该硬编码的“ 5”,则大于最小高度和最小宽度的图像将完全无法调整大小。 如果这完全有帮助,我在这里举了一个示例(希望)说明我正在尝试做的事情: http://overloaded.org/tmp/imgtest/ http://overloaded.org/tmp/imgtest/imgtest.zip 我知道我可以通过完全省略
<img>
元素,而是将缩略图作为包含元素的居中背景图像拉入缩略图来解决此问题,但是,如果可能的话,我想将
<img>
元素保留在其中这页纸。 感谢您提供的任何帮助或指示! 编辑:我想我应该注意,理想的解决方案将在IE 6+和现代浏览器中运行,但是在IE 9+和其他现代浏览器(最近的WebKit,Gecko等)中运行的任何解决方案都将被欣然接受。     
已邀请:
可能,可能。 另外,可能不是最好的主意。您要克服的主要问题是缩略图的方向。如果要处理全景图怎么办?当然,将其缩小将创建非常难看的“压缩”图像,以及非常高的图像。很少有人会100%地使用4X3或16X9交易。因此,您将需要一种机制来填充图像。即使比例正确,也无法像使用Photoshop或Gimp之类的程序那样干净地调整大小。 这种思考过程中的另一个主要问题是,您将通过较大的图像将大量不必要的数据发送到服务器。加载将花费更长的时间,不必要地填充DOM,并且总体上只会抑制UI体验。 有很多方法可以解决这个问题,没有一个是纯CSS。我已经解决了好几次,每次都基于客户的独特方式。对于一个想要完全自定义事物的客户,它是一个自定义上传器,可通过iMagick(图像魔术的一部分)和自定义CSS / Javascript为具有重大交互性的专辑调整大小。在另一个实例中,我使用Gallery作为后端(处理缩略图的创建,上传,标题,裁剪和组织),然后只是将重新格式化的图像链接从数据库中拉出,以更具吸引力的方式显示它们。您可以省下更多麻烦,只需使用Flickr api之类的东西即可提取图像供您使用。 这是使用ImageMagick制作缩略图的教程。     
您可以(有点)使用CSS3
background-size
附加功能:
contain
cover
。 现场演示
contain
(上图)适合整个图像,并保持宽高比。一无所有。
cover
(底部图片)垂直或水平(取决于图像)填充包含的元素,并裁剪其余部分。     
.thumb img {
    max-width: 200px;
    max-height: 150px;
    min-width: 200px;
    min-height: 150px;
}
好吧,我知道,如果希望较小的图像将其放大,则将其最大化和最小化。     
尝试设置max-width和height而不是min,因为如果图像大小不完全相同,则会溢出:)     

要回复问题请先登录注册