-1

I currently have an image that I want the center to stay the same size and fill the section. When the browser is at a large pixel-width, the center of the image is positioned perfectly. However, when I resize the browser, the center of the image is scaled down to fit the rest of the image. Is it possible to have to create a responsive way for the image to crop itself. I have sketched out what I need in the attached image. - The center of the frame(the boat) needs to remain the same size when I resize the browser, while the sides of the image (the trees) need to be cropped out

Thank you so much for any help!

sebastian
  • 1
  • By 'same size' do you mean physically the same size, that is if I put a plastic ruler up to the screen the width and height of the boat are the same in centimetrtes whether I'm viewing on a small phone or on a large desktop? What's the minimum the boat has to be totally shown in? A small runnable snippet with a real image might help understanding. See https://stackoverflow.com/help/minimal-reproducible-example – A Haworth Jul 06 '22 at 05:16

1 Answers1

0

you can add image in div using background-image and provide height and width and set background-size:contain;

Example:

width: 100%;
height: 80%;
background-image: url('gueesthenumber.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
U-33
  • 139
  • 1
  • 11