将 json 文件中的图像显示到 HTML 文件中，但样式不适用于它们

Question

编辑 - 只是为了澄清图像显示在我的网页上，代码示例样式（css）只是不会以任何方式对任何图像产生影响。如果我给它一个类，如果我在 HTML 中给它直接样式（使用 style=""），或者如果我使用 jQuerys .addClass 或 .css，那么样式就不起作用了。

所以这是我的 html 图像显示的地方。

<div class="Hats2">

</div>

现在这是我用来显示图像的 jquery

$(function() {

    var products = []

    $.getJSON('test.json', function(data) {
        $.each(data.products, function(i, f) {
            var tblRow = '<div class="Hats"><img src=' + f.imUrl + '></div>'
            $(tblRow).appendTo(".Hats2");
        })
    })
})

现在我只有三行 CSS，可以在“帽子”类下更改它们的大小。我通过使用 img 元素本身和 div 来给出图像（就像现在一样）

.Hats {
    width: 200px;
    height: 200px;
}

但由于某种原因，css 根本没有生效我尝试了所有不同的样式，如边框半径等。根本没有样式。是因为我通过 jquery 上课了吗？我真的很困惑。这是我的 json 文件，以防万一。

{ "products": [
{
  "title": "Hat",
  "imUrl": "http://ecx.images-amazon.com/images/I/41pRaO7fFSL._SX395_.jpg"
},
{
  "title": "Hat2",
  "imUrl": "http://ecx.images-amazon.com/images/I/41z9Fhv41lL._SY300_.jpg"
},
{
  "title": "Hat3",
  "imUrl": "http://ecx.images-amazon.com/images/I/41y-UNn0QLL._SX342_.jpg"
}
]
}

Answer 1

这行不通。

$(tblRow).appendTo(".Hats2");

你应该放

$(tblRow).appendTo($(".Hats2"));

Answer 2

问题在于，即使.Hats div 的样式正确，也就是说，正如您在 CSS 中所说，它们是 200x200px，但您放入其中的图像元素更大.

即使图像是 .Hats div 的子元素，它们也会超出其父元素的边界。

只需添加这个 css 规则：

.Hats > img {
  max-width: 100%;
  max-height: 100%;
}

适合图像在其父 div 内。

var data = {
  "products": [
    {
      "title": "Hat",
      "imUrl": "http://ecx.images-amazon.com/images/I/41pRaO7fFSL._SX395_.jpg"
    },
    {
      "title": "Hat2",
      "imUrl": "http://ecx.images-amazon.com/images/I/41z9Fhv41lL._SY300_.jpg"
    },
    {
      "title": "Hat3",
      "imUrl": "http://ecx.images-amazon.com/images/I/41y-UNn0QLL._SX342_.jpg"
    }
  ]
};

$(document).ready(function() {
  $.each(data.products, function(i, f) {
    var tblRow = '<div class="Hats"><img src="' + f.imUrl + '"></div>';
    $(tblRow).appendTo(".Hats2");
  });
});

.Hats {
    width: 200px;
    height: 200px;
}

.Hats > img {
  max-width: 100%;
  max-height: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="Hats2">

</div>

Answer 3

您应该将 Hats 类分配给 img，如下所示：

$(function() {

var products = []

$.getJSON('test.json', function(data) {
    $.each(data.products, function(i, f) {
        var tblRow = '<div><img class="Hats" src=' + f.imUrl + '></div>'
        $(tblRow).appendTo(".Hats2");
    })
    $(".Hats").css({width: "200px", height: "200px"});
});

})