The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help cropping an image an keeping its center when resizing the window

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #281702

    I have an image tag (containing a .png) that spans the width of my viewport. When I resize it I want it to be cropped with the png’s center fixed on the center of the page, however it crops relative to its top-left point. The image is inside a as well

    The image is part of a bootstrap carousel and it’s supossed to be the promotional banner of a website. I’ve tried using the image as a background-image and it worked exactly as I wanted, but I’d prefer to use an image tag for this (acessibility and other control preferences). I’ve also tried the object-position property on CSS and it didn’t work (I applied it to the image)

    I also made a small image describing the current behavior and the desired one . Thank you!


    It would be easier for us to offer help if you could provide a reduced demo in CodePen.

    Unfortunately we can’t diagnose a diagram. We need the live code.

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.