CODEWITHSUNDEEP
htmlcss
Kim Stacks
Kim Stacks

Reputation: 10822

How is the main image height always approximately 75% of the window size?

http://www.apple.com/sg/

there is a giant image that will autosize such that it is always approximately 75% of the window height.

How is this done?

I found a css media query, but I can only discover this one:

@media only screen and (max-width: 1068px), only screen and (max-height: 800px) {
   .page-home .billboard.evergreen {
       height: 50%;
       min-height: 630px;
    }
}

How do I find out about the other media queries for different resolutions?

Upvotes: 0

Views: 177

Answers (1)

Nico O
Nico O

Reputation: 14142

The easiest way will be:

.item
{
  height: 75vh;
  background-color: blue;
}
<div class="item"></div>

These are so called viewport units. They are supported pretty good.

You may also try to utilize vmax for this use case. This will always hold the larger value of vw or vh.

Upvotes: 4

Related Questions