Adjust div to display the center of the image on smaller screens without changing the image size

Asked

Viewed 34 times

1

I have an image like this:

On smaller screens, I want it to be seen in the center, without changing the size and scale of the image

Does anyone have any idea how to do that?

jquery html5 css3

  • Good evening, you can use the css Object-fit Leia: https://www.w3schools.com/css/css3_object-fit.asp Ex: https://jsfiddle.net/nupqf4hz/

1 answer

0

Apparently what you want is for the height to be constant, while the width does not.

I think this can be solved with:

  background: url(...);
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%;


div {
  background: url(https://cdn.pixabay.com/photo/2016/02/24/08/53/flower-1219360_960_720.jpg) no-repeat;
  background-position: center;
  background-size: auto 100%;
 
 
  width: 100%;
  max-width: 250px;
  height: 90vh;
  resize: horizontal;
  overflow: auto;
  border: 2px solid #000;
}
<div></div>

In the above example it is possible to resize the image at its edge, as you narrow the image, only the center will be shown.

Browser other questions tagged jquery html5 css3

You are not signed in. Login or sign up in order to post.