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

使用以下jquery ....

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

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

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

Answer 2

这仅适用于css：

包含div：

.image_holder {
overflow:hide;
}

图像：

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

如何将图像适合div容器？

2 个答案: