代码之家 › 专栏 › 技术社区 › rahulg

不希望图像超出定义的div大小;应保持图像分辨率;不要介意图像是否被剪切

image html css

rahulg · 技术社区 · 12 年前

我正试图通过展示缩略图来创建一个HTML相册预览;所有缩略图都应定义为正方形。

现在,当我试图显示缩略图时,要么一些图像的分辨率失真,要么在另一种情况下(即)如果我不同时设置属性(高度和宽度),图像就会从DIV中出来并与其他图像重叠。

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

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

4 回复 | 直到 12 年前

kingkode 12 年前

使用 overflow: hidden 在您的div上

HTML格式:

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

CSS格式:

.thumbnail{
     overflow: hidden;
}

Anoop 12 年前

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

div{
    overflow:hidden;
}

Mr_Green 12 年前

检查这个 fiddle 。对所有图像设置相同的宽度和高度

如果图像分辨率彼此相差很大,则使用 div 的而不是 img 并将图像作为背景给予它们。

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

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

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

Abhishek Panda 11 年前

这可以通过以下方法实现

HTML代码

<div class="kq"><div class="img_div"><img src = "sample.jpg" /></div></div>

货物积载与系固安全操作规则

.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;