1

我正在尝试通过显示缩略图以 HTML 格式创建专辑预览;所有缩略图都应定义为方形。

现在,当我尝试显示缩略图时,某些图像的分辨率会失真,否则在另一种情况下(即)如果我没有同时设置属性(高度和宽度),则图像来自 DIV并与其他图像重叠。

你能告诉我,如何在不损失图像分辨率的情况下显示图像,这样它们就不会从 div 中出来;我不介意图像是否被裁剪。

一个简单的解决方案很好,因为我正在使用表格,我不想为此使用 iFrame。谢谢!!

4

4 回答 4

6

overflow: hidden在你的 div 上使用

HTML:

<div class="thumbnail">
     <img src="images/thumb-01.png"/>
</div>

CSS:

.thumbnail{
     overflow: hidden;
}
于 2012-09-25T17:20:46.257 回答
1

如果您的每个图像都有自己的 div 父级,那么您可以在 div 上使用 css 溢出。从图像中删除高度和宽度。

div{
    overflow:hidden;
}
于 2012-09-25T17:19:38.903 回答
0

这可以通过以下方法实现

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;

}

于 2013-12-15T06:56:07.073 回答
0

检查这个小提琴。为所有图像设置相同的宽度和高度

如果图像分辨率彼此差异很大,则使用div's 而不是img并将图像作为背景。

在这种情况下,您可以使用

overflow:hidden;
background-size: 100px 100px; /* CSS3 */

使用background-size您可以根据需要设置图像尺寸。

于 2012-09-25T17:26:42.290 回答