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

Question

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

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

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

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

Answer 1

overflow: hidden在你的 div 上使用

HTML：

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

CSS：

.thumbnail{
     overflow: hidden;
}

Answer 2

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

div{
    overflow:hidden;
}

Answer 3

这可以通过以下方法实现

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;

}

Answer 4

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

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

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

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

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