我正在尝试将图像附加到具有指定高度和宽度的元素。图像本身可能比该高度和宽度更大或更小,我想调整图像以适应尺寸,而不是重复或仅显示图像的一部分。
使用Javascript:
我得到了图片的网址以及它的高度和宽度,然后我尝试在这里创建元素并设置其属性。
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%
}
但随后图像停止显示在一起。
答案 0 :(得分:2)
您需要设置图片来源:
var listingEntry = document.createElement("img");
listingEntry.setAttribute("height", height);
listingEntry.setAttribute("width", width);
listingEntry.className = "classTitle";
listingEntry.style.backgroundImage = "url(" + imageSourceUrl + ")";
listingEntry.src = imageSourceUrl;
答案 1 :(得分:2)
我会以两种不同的方式来解决这个问题:
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元素,因为元素的内容往往会掩盖背景。