如何使图像适合 div 容器？答案

【问题标题】：How to fit image to div container?如何使图像适合 div 容器？
【发布时间】：2013-02-28 10:03:36
【问题描述】：

我有问题。

http://img831.imageshack.us/img831/2111/18435469.png

在这里您可以看到一张图片不适合容器。如果宽度、高度是固定的，这很容易做到，但这种布局是灵活的，并且当您调整浏览器窗口大小时，图像高度+宽度会发生变化。

也许有一种使用 Javascript 的简单方法？

CSS：

.photo:nth-child(4n+1) {
background:#ff0000;
max-width:100%;
margin: 0;
clear: both;
}

.photo:nth-child(4n+2) {
background:#EEE;
max-width: 33.33%;
min-height: 300px;
float:left;
margin: 0;
}

.photo:nth-child(4n+3) {
background:#AAA;
max-width: 33.33%;
min-height: 300px;
float:left;
margin: 0;
}

.photo:nth-child(4n+4) {
background:#CCC;
max-width: 33.33%;
min-height: 300px;
float:left;
margin: 0;
}
.photo:nth-child(4n+1) img {
width: 100%;
}

.photo:nth-child(4n+2) img {
max-width: 100%;
max-height: 100%;
}

.photo:nth-child(4n+3) img {
max-width: 100%;
max-height: 100%;
}

.photo:nth-child(4n+4) img {
max-width: 100%;
max-height: 100%;
}

PHP 代码：

 <div class="photo">
<img class="group2" href="uploads/'.$row[2].'" src="uploads/'.$row[2].'"/>
</div>

【问题讨论】：

标签： javascript image html containers

【解决方案1】：

使用下面的 jquery ....

$(document).ready(function(){
var height = $(".photo").height();
var width=$(".photo").width();
$(".group2").attr("height",height );
$(".group2").attr("width",width);
});

这将获取图像的高度和宽度并分配给图像。所以图像适合

注意。最好总是使用 id 来获取高度和宽度。

【讨论】：

【解决方案2】：

这仅适用于 css：

包含 div：

.image_holder {
overflow:hide;
}

图片：

.image_holder img {
height: 100%;
max-width: 150%;
width: auto;
}

【讨论】：