javascript - 使用 javascript 附加适合设置尺寸的图像

Question

我正在尝试将图像附加到具有指定高度和宽度的元素。图片本身可能大于或小于该高度和宽度，我想调整图片以适应尺寸而不是重复或仅显示图片的一部分。

Javascript:

我得到了图像的 URL 及其高度和宽度，然后我尝试在此处创建元素并设置其属性。

     var listingEntry = document.createElement("img");
     listingEntry.setAttribute("height", height);
     listingEntry.setAttribute("width", width);
     listingEntry.className = "classTitle";
     listingEntry.style.backgroundImage = "url(" + imageSourceUrl + ")";

然后我通过 Id 从 DOM 中获取元素并附加它:

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

还有我的 CSS:

article .tile {

display: inline-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;

}

article img {

}

我试过:

article img {
   max-height: 100% 
   max-width: 100%
}

但随后图像不再一起显示。

Answer 1

我会用两种不同的方式处理这个问题:

1)创建一个div并设置背景图片:

var listingEntry = document.createElement("div");
listingEntry.setAttribute("height", height);
listingEntry.setAttribute("width", width);
listingEntry.className = "classTitle";
listingEntry.style.backgroundImage = "url(" + imageSourceUrl + ")";

或 2) 创建一个 img 并设置一个指向 url 的 src:

var listingEntry = document.createElement("img");
listingEntry.setAttribute("height", height);
listingEntry.setAttribute("width", width);
listingEntry.className = "classTitle";
listingEntry.src = imageSourceUrl;

注意:我会采用第二种方法。还要尽量避免为 img 元素设置背景图像，因为该元素的内容往往会掩盖背景。