How to keep the cup always in the middle without decreasing image size even when we decrease the window size?

Question

There is an image of a coffee cup. I am trying to achieve a functionality where even though the window size is decresed the image of the coffee cup stays visible and also there is no change in its actual size.

Currently what is happening:

Above picture is the initial state where i have not started to decrease the window width.

In this picture we could see that till there was margin in the left side of the image then upon decreasing the window size both right and left space decreases uniformly but after that the left side became static and only right side started to decrease making the cup to disappear.

Here is the css code:

.App {
  text-align: center;
  border: 2px solid black;
  width: 70%;
  margin: auto;
 
}

Here is the react code:

<div className="App">
        <h1>Hello</h1>
        <img src={cupImage} />
</div>

Please guide me on how i could achieve my required functionality using css or some other way. Also let me know if more information is required.

Answer 1

First, set your image to the width of its container with width: 100%.

Then you can use object-fit and set its value to cover. The image will fill the height and width of its container while maintaining its aspect ratio, cropping the image in the process in a centered manner.

You can then give img a height or a min-height.

img {
 width: 100%;
 object-fit: cover;
 min-height: 200px;
}

MDN docs: object-fit