New CSS Units - vw and vh

Back to all Digital Media resources examples

There are new CSS units which base themselves off of the width and/or height of the browser window otherwise known as the "viewport". Below are some examples of applying the units to images, although you can apply the units to elements that are NOT images such as divs, figure, etc. Resize the browser window to see how images resize themselves based on the browser window or viewport.

The CSS unit of vw = "viewport width" and vh = "viewport height"

Image set to max-width:75vw and height:auto
where 75vw = "75% of the viewport width" or 75% of the width of browser window, the viewport

Each image has CSS properties and values of width:auto and max-height:50vh
where 50vh = "50% of the viewport height" or 50% of the height of browser window, the viewport
Each image has CSS properties and values of width:33.33vw and height:90vh
where 33.33vw = "33.33% of the viewport width" or 33.33% of the width of browser window, the viewport
where 90vh = "90% of the viewport height" or 90% of the height of browser window, the viewport