Question

我在网页上添加了两个图像，这些图像已经很好地加载了，但是当我尝试使用CSS更改高度，宽度，边界半径等时，它将忽略此图像，并保持原始形状和大小。有什么原因的帮助吗？

我的HTML：

   <div class="tile-image"></div>
   <div class="tile-image"></div>

我的CSS：

   .tile-image {
    width: 432px;
    height: 192px;
    object-fit: cover;
    border-radius: 4px;
    }

我的JavaScript：

 data = {
 "tiles" : [
 {
 "img" : "example.jpg"
 },
 {
 "img" : "example.jpg"
 }
 ]
 };

data.tiles.forEach((item) => {
let img = new Image();
img.src = item.img;
tile = document.getElementsByClassName("tile-image")[0];
tile.appendChild(img);
});

Answer 1

尝试将图像宽度设置为容器的大小。

将此添加到您的CSS：

.tile-image img{
   width: 100%;
}

或者，您想要达到的目标是：

.tile-image img {
   width: 432px;
   height: 192px;
   object-fit: cover;
   border-radius: 4px;
}

Answer 2

您要在父div上设置高度和宽度，而不是图像本身。添加以下CSS：

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

应该为您工作

无法更改图像的宽度和高度

2 个答案: