picture width should be equal to browser height

Zeus0422 0
Viewed 44

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.

this website only contains simple HTML and css

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

image javascript css html
1 Answers

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)
{
.imageexample
  {
  width:100%;
  }
}
Mozerman0
Related