使用Javascript将图像附加到自定义高度和宽度的div中只适用于设置的维度

Question

我正试图使用HTTP GET请求拉取Reddit的首页，然后显示一个仅由缩略图中的图像组成的网页。

这是迄今为止我成功获得图像的URL和图像维度的代码。在我获得每个元素所需的信息后，我试图创建一个新的div元素，并将其附加到我通过ID获得的gridParticle元素中。在这样做之前，我会更新它的类名以及图像和大小。

 $.getJSON("https://www.reddit.com/.json", function (data) {
    var items = [];
    $.each(data.data.children, function (i, obj) {
        if ((obj.data.preview != null) && (obj.data.preview.images != null)) {
            var imageSourceUrl = preview.images[0].source.url;
            var height = preview.images[0].source.height;
            var width = preview.images[0].source.width;
           var listingEntry = document.createElement("div");
            listingEntry.className = "tile";
            listingEntry.style.backgroundImage = "url(" + imageSourceUrl + ")";
            listingEntry.style.width = width
            listingEntry.style.height = height;

            var gridArticle = document.getElementById("gridArticle");
            gridArticle.appendChild(listingEntry);
        }
    });
});

HTML

<article id="gridArticle">

  </article>

CSS

   article .tile {
    display: block;
    float: left;
    box-sizing: border-box;
    font-size: 3em;
    font-weight: 700;
    padding: 0 6px;
    color: #fff;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    border:1px dotted black;
  }

然而，如果我删除了background-size属性，并在父文章.tile｛｝中添加了height和width属性，并将它们设置为固定长度（例如100 px 100 px），则图像会显示得很好，但只是在指定的维度上。

有什么想法吗？

Answer 1

您正在将图像添加到要作为背景插入的div中。因此，它们的行为完全符合您的预期——如果div没有内容，那么它就不会占用任何空间，因此您不会看到任何背景。设置背景大小不会影响div本身的大小。

解决方案：

1. 将JS中现有的高度和宽度变量作为CSS高度和宽度应用。您不需要麻烦设置背景大小；在CSS中，将大小设为"cover"
2. 在div上使用真实的图像元素而不是背景

Answer 2

您的div.tile.image元素没有任何内容，也没有集合width和height，这会导致块根本不占用空间（您可以使用浏览器的检查器工具验证这一点）。

解决此问题的一种方法是设置元素的width和height：

listingEntry.style.width = width;
listingEntry.style.height = height;

另一种方法是将图像添加为附加到tile的img元素，并将tile的display属性设置为inline-block。