I recently added two images to my website successfully, but I am facing an issue when attempting to modify their dimensions and shape using CSS. Despite adjusting the height, width, border-radius, etc., the images remain unchanged. Can anyone provide insight into what might be causing this problem?
Here is a snippet of my HTML code:
<div class="tile-image"></div>
<div class="tile-image"></div>
This is the relevant portion of my CSS code:
.tile-image {
width: 432px;
height: 192px;
object-fit: cover;
border-radius: 4px;
}
Lastly, here is how I am handling it in 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);
});