Struggling with CSS while building websites is a common issue for me.
In my current project, I have encountered a challenge where I placed two images inside a div container.
Oddly enough, when I add text to the div, it adjusts its height accordingly. However, when I replace the text with an image, the div mysteriously reverts to a default height.
Although I have made the size of the images responsive in my CSS and added a background color to the div for clarity, the issue persists.
Upon resizing the browser window, the div's height remains constant and the images get pushed down within the container.
- How can I resolve this discrepancy? I aim for the div container's height to be as responsive as the images contained within, adjusting fluidly as I resize the browser window.
- Lastly, what key concept am I missing here?
Your assistance is greatly appreciated.
Here is a snippet of my code:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div style="background-color:red;">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">
<img style="height:2vw; width:4vw;" src="image.jpg" alt="en">
</div>
</body>
</html>