javascript - 如何设置动态图像的高度和宽度

Question

这工作正常并给我图像，但这些图像的分辨率不同，我希望它们都是 200x200

HTML

<div class="container-fluid" id="myElement">
<div id="images"> </div></div>

Javascript 函数

function appendReturnedImages(data) {


  $.each(data.images, function(index, element) {

    $("#myElement #images").append($('<img height="200" style="max-width: 200px">', {

      src: element

    }));

 });

}

Answer 1

正如我之前所说，不要在循环中追加，因为它很昂贵!更简洁、正确的追加方式如下。

var $html = $();

$.each(data.images, function(index, element) {
    $html = $html.add($("<img/>", {
        height: 200,
        //width: 200, // uncomment this if you need to set width as well
        css: {
            'max-width': 200
        },
        src: element
    }));    
});
// You shouldn't be using $("#myElement #images") as an ID must be unique in a document!
$("#images").append($html);