0

私は問題があります。

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

ここでは、1 つのイメージがコンテナーに収まらないことがわかります。幅、高さが固定されていれば簡単ですが、このレイアウトは柔軟で、ブラウザ ウィンドウのサイズを変更すると画像の高さ + 幅が変わります。

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>
4

2 に答える 2

0

次のjqueryを使用します...。

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

これにより、の高さと幅が取得され、画像に割り当てられます。したがって、画像は

ノート。高さと幅を取得するには、常にidを使用することをお勧めします。

于 2013-02-28T11:54:00.103 に答える