我正在尝试通过显示缩略图以 HTML 格式创建专辑预览;所有缩略图都应定义为方形。
现在,当我尝试显示缩略图时,某些图像的分辨率会失真,否则在另一种情况下(即)如果我没有同时设置属性(高度和宽度),则图像来自 DIV并与其他图像重叠。
你能告诉我,如何在不损失图像分辨率的情况下显示图像,这样它们就不会从 div 中出来;我不介意图像是否被裁剪。
一个简单的解决方案很好,因为我正在使用表格,我不想为此使用 iFrame。谢谢!!
overflow: hidden
在你的 div 上使用
HTML:
<div class="thumbnail">
<img src="images/thumb-01.png"/>
</div>
CSS:
.thumbnail{
overflow: hidden;
}
如果您的每个图像都有自己的 div 父级,那么您可以在 div 上使用 css 溢出。从图像中删除高度和宽度。
div{
overflow:hidden;
}
这可以通过以下方法实现
HTML 代码
<div class="kq"><div class="img_div"><img src = "sample.jpg" /></div></div>
CSS 代码
.kq{
background: none repeat scroll 0 0 #FFFFFF;
border: 1px solid #CCCCCC;
border-radius: 3px;
font-family: 'Helvetica Neue',Helvetica,Arial,'lucida grande',tahoma,verdana,arial,sans-serif;
padding: 8px 12px 12px;
position: relative;
width : 60%;
margin : 0 auto;
margin-bottom:10px;
overflow: hidden;
}
检查这个小提琴。为所有图像设置相同的宽度和高度
如果图像分辨率彼此差异很大,则使用div
's 而不是img
并将图像作为背景。
在这种情况下,您可以使用
overflow:hidden;
background-size: 100px 100px; /* CSS3 */
使用background-size您可以根据需要设置图像尺寸。