Question

我提供fiddle以获得更好的解释

尽管行中的图像数量不足，但5行的高度必须相等
我正在寻找一个容器来容纳图像，所有图像容器的宽度和高度必须相等。
现在我拥有的是一个容纳所有图像的容器，我要找的是：每个图像都应该放在一个容器中容器应该在一个容器中。行长应取决于其中的图像数量。

  <p>topa</p>

    <div id="container2">
        <img src="http://lorempixel.com/300/200" />
        <img src="http://lorempixel.com/200/250" />
        <img src="http://lorempixel.com/200/200" />
         <img src="http://lorempixel.com/300/200" />
        <img src="http://lorempixel.com/200/250" />
        <img src="http://lorempixel.com/200/200" />
         <img src="http://lorempixel.com/300/200" />
        <img src="http://lorempixel.com/200/250" />
        <img src="http://lorempixel.com/200/200" />
         <img src="http://lorempixel.com/200/250" />
        <img src="http://lorempixel.com/200/200" />
    </div>
    <p>topb</p>
    <div id="container2">
        <img src="http://lorempixel.com/300/200" />
        <img src="http://lorempixel.com/200/250" />
        <img src="http://lorempixel.com/200/200" />
         <img src="http://lorempixel.com/300/200" />

    </div>
    <p>topc</p>
    <div id="container2">
        <img src="http://lorempixel.com/300/200" />
        <img src="http://lorempixel.com/200/250" />


    </div>
    <p>topd</p>
    <div id="container2">
        <img src="http://lorempixel.com/300/200" />
        <img src="http://lorempixel.com/200/250" />
        <img src="http://lorempixel.com/200/200" />


    </div>
    <p>tope</p>
    <div id="container2">
        <img src="http://lorempixel.com/300/200" />
         <img src="http://lorempixel.com/200/250" />


    </div>

    <div style="width:598px;text-align:center;border:1px solid #000;margin:10px;">600px</div>

#container2{
    width: 100%;
    margin: 10px;
    overflow: hidden;
    padding:2px;
}
#container2 img{float:left;}

var container_width = $('#container2').width();
var container_width_temp = 0.0; // must be float!
var container_height = 100.0; // random initial container heigth for calculations

$('#container2 img').each(function(){
    var newwidth = (this.width / this.height) * container_height;
    this.width = newwidth;
    $(this).data('width', newwidth); 
    container_width_temp += newwidth;
});

$('#container2 img').each(function(){
    this.width = $(this).data('width') * (container_width / container_width_temp);
});

Fiddle

jQuery维护图像容器中图像的纵横比;容器中的所有图像都放在一行中

0 个答案: