將圖像從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來給出圖像，並且div位於其中（就像現在一樣）

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

但是出於某種原因，css根本沒有發揮作用。Ive嘗試了所有不同的樣式，例如邊界半徑等。根本沒有樣式可用。 是因為我通過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的.Hats ，它們也超出了其父代的邊界。

只需添加以下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 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"});
});

})