圖片裁減列表顯示

.jupload1-list { overflow: hidden; width: 100%; }
.jupload1-list div { overflow:hidden;float: left; width: 20%; margin: 2.5% 0 0 4%; border: transparent 2px solid; border-top-width: 8px; cursor:pointer; }
.jupload1-list img { width: 100%; }
.jupload1-list div.cur { border-color: #d0f500; }
.jupload1-list input { border: #ccc .1rem solid;}

Css

<div class="jupload1-list"></div>

Html

var size = $(document).width() * 0.2;
$.each("/Image/BigImage/backGround.png,/Image/BigImage/test.jpg".split(','), function (i, src) {
var img = new Image();
img.src = src;
img.onload = function () {
    var rate = img.width / img.height;
    var $div = $('<div></div>').height(size).append($(img).css(rate > 1 ?
    { 'height': size, 'width': rate * size, 'margin-top': -5, 'margin-left': (1 - rate) * size / 2 } :
    { 'height': size / rate, 'width': size, 'margin-top': (1 - 1 / rate) * size / 2 - 8, 'margin-left': -2 }
    ));
    $('.jupload1-list').append($div);
}
})

jQuery