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

Question

I have added two images to my web page which have loaded fine, however when I try to change the height, width, border-radius, etc with CSS it ignores this and stays at the original shape and size. Any help on what is causing this?

My HTML:

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

My CSS:

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

My 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

try to set your image width to the size of the container.

Add this to your css:

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

Or maybe, what you are trying to achive is this:

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

Answer 2

You are setting a height and width on the parent div but not the images themselves. Add the following CSS:

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

Should work for you