I've been researching for a while now, though I still cannot find a way to scale an image depending on the exact window size. Here is an example website's home screen, that uses the feature I am trying to recreate.

https://www.rare.co.uk/

img {
    display: block;
    height: 100%;
    width: 100%;
    max-width: 1000px;
    transform: scale(1.2);
}

What would work as well of course is having this, which got me to a result, but trying to center an image with percentage height and width simply doesn't work. When observing the image on the webpage above, the image seems to zoom in more and more depending on how wide you pull your screen, while the image has the 100% height. Does anyone have a clue how I am able to recreate the effect I get on the website above?

{
    height: 100%;
    min-width: 100%;
    overflow-x: hidden;
    background-position: center 25%;
}

CodePudding user response：

maybe you are looking for the object-fit css property:

{
   object-fit: cover;
   width: 100%;
   height: 100%;
}

CodePudding user response：

In the website you linked to, that's a background-image of an element which is filling the whole window (CSS: width: 100%; height: 100vh;) and which which has background-size: cover; applied to it.