纯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等)中运行的任何解决方案都将被欣然接受。
没有找到相关结果
已邀请:
4 个回复
勺的驴吓识
薄响
附加功能:
和
。 现场演示
(上图)适合整个图像,并保持宽高比。一无所有。
(底部图片)垂直或水平(取决于图像)填充包含的元素,并裁剪其余部分。
慰泥悍瓶
好吧,我知道,如果希望较小的图像将其放大,则将其最大化和最小化。
镶骄册筷