javascript / CSS 图片宽度=浏览器高度

Question

Hello and sorry for the weird title. On my website, I want to have a header image, of exactly the same height as the browser. So when you open the website you should see a picture, which covers all of the screen but isn't a background image. This way you should be able to move away from the image if you scroll down. The problem is, that if I say "browser height = pixel height", the format of the picture will change.

Because of that, I need to have a function, that automatically changes the width of the picture to the height of the browser or rather the amount of vertical pixels your browser has. If you scroll for example the picture shouldn't change.

Until now I have only tried CSS because I have no experience with javascript. After visiting many websites I still haven't found a solution to this problem. Here you can see what the website should look like on pc and a mobile device.

If I however try to look at the mobile version, it looks like this, even though it should look like the first picture.

Here you can see an example of a website where it is perfectly how I want it. There you can see that the picture covers the entire screen height and doesn't change if you scroll (The only difference is, that I don't want the picture to cover all of the screen (left and right). ( https://restaurant-am-bertasee.eatbu.com/?lang=de )

Thank you very much, any help is appreciated.

Answer 1

Did you try to add media only attribute to your css? I used below max width 428 px because that is mainly on iPhone 13 but you can change it if you want.

.imageexample {

display: block;

width:428px;

max-width: 100%;

height: auto;

margin: 0 auto;

}

.box {

display:inline-block;

width:100%;

text-align:center;

}

@media only screen and (max-width: 428px)

{ imgeexample

{

width:100%;

}

}