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

如果图像的比例不是1：1，则无法在不变形的情况下以200x200px的分辨率显示图像。 HTML不能只显示图像的一部分，总是整个。

您需要准备缩略图200x200并使用它们，或者将图像设置为背景，以获取尺寸为200x200px的元素。

Answer 2

不应该这一行：

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

看起来像这样？：

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

Answer 3

正如我之前所说，不会附加循环，因为它很贵！更清晰，更正确的追加方式如下。

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);

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

3 个答案: