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

Question

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

所以这是我的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改变了他们在班级＆＃39; Hats＆＃39;下面的大小。我通过img元素本身尝试了这个图像，div就是它（就像现在一样）

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

但由于某种原因，css并没有起作用，我尝试了所有不同的样式，如border-radius等。没有样式可行。是因为我通过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

问题在于，即使.Hats div 正确设置样式，也就是说，它们是你在CSS中所说的200x200px，你放在里面的图像元素它们更大。

即使图像是.Hats div的子图像，它们也会延伸到父母的边界。

只需添加此css规则：

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

适合其父div中的图片。

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

<div class="Hats2">

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

这不起作用。

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

你应该把

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

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

})