How to center background image on a narrow screen vertically [duplicate] - css

Question

This question already has answers here:
How do I center an image if it's wider than its container?
(10 answers)
Flexbox: center horizontally and vertically
(14 answers)
Center image that is bigger than the screen
(9 answers)
Closed 2 years ago.
I use an image as a backround, something like this:
<div class="container">
<img src="http://somestorage.com/img.png" />
</div>
css:
.container {
position: absolute;
height: 100vh;
width: 100%;
overflow: hidden;
text-align: center;
}
.container img {
min-width: 100%;
min-height: 100%;
}
The problem is thought, that I wanna have a central top part on narrow screens. Now it shrinks like this:
I wanna it be like here:
JsFiddle
Could anyone suggest a solution?

Answer 1

Simply I changed min-width: 100%; with width: 100%; and added object-fit: cover;
.container {
position: absolute;
height: 100vh;
width: 100%;
overflow: hidden;
text-align: center;
}
.container img {
width: 100%;
min-height: 100%;
object-fit: cover;
}
<div class="container">
<img src="http://img.ohandroid.com/android/TJ0mc.png" />
</div>

Answer 2

I would try something like this:
.container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100%;
overflow: hidden;
text-align: center;
}
.container img {
min-width: 720px;
min-height: 480px;
}
You could also change out the images for differing sizes of screens using media queries.
#media (max-width: 480px) {
body {
background-image: url(images/background-mobile.jpg);
}
}
#media (min-width: 481px) and (max-width: 1024px) {
body {
background-image: url(images/background-tablet.jpg);
}
}
#media (min-width: 1025px) {
body {
background-image: url(images/background-desktop.jpg);
}
}
ref: https://web.dev/optimize-css-background-images-with-media-queries/