Search code examples
htmlcssfrontendweb-frontend

Non-Background Responsive Images in CSS

My images are taking on its entire dimensions-- spanning the page to the point where you have to scroll right to see the image. I do not want this.

Screenshot Of Web Browser View

I would like for my images to neatly fit within the webpage and respond to the size of the page, without scrolling to the right.

I plan to have multiple images on the page with text at the top, like so...

multiple images idea

Here is my current code. I've been trying different alternatives, but I can't seem to figure it out.

My CSS code:

#carousel {
  position: absolute;
}

My HTML code:

<div id="carousel" align="center">
        <img src="../images/....jpg" />
</div>

Thanks in advance.

Solution

  • Add either #carousel img { width: 100% } or #carousel img { object-fit: cover } to your CSS for responsive images.