javascript - 如何使图像适合 div 容器？

Question

我有个问题。

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>

Answer 1

这仅适用于 css：

包含 div：

.image_holder {
overflow:hide;
}

图片：

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

Answer 2

使用以下 jquery ....

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

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

笔记。最好总是使用 id 来获取高度和宽度。