- From: Boris Zbarsky <bzbarsky@MIT.EDU>
- Date: Thu, 13 Oct 2011 14:56:29 -0400
- To: www-style@w3.org
On 10/13/11 2:41 PM, Belov, Charles wrote:
> In pseudocode, and assuming actual viewport width and height are used in the calculations:
>
> If entire image fits within viewport {
> width: [actual width]
> height: [actual height]
> }
> else if image width exceeds viewpoint width by more than image height exceeds viewport height {
> width: [viewport width]
> height: [actual height] / ([actual width] / [viewport width])
> }
> else {
> width: [actual width] / ([actual height] / [viewport height])
> height: [viewport height]
> }
Or in other words, given vh and vw units that map to 1/100 of viewport
width and height:
max-width: 100vw;
max-height: 100vh;
Then you get the above for free given the replaced element behavior
specified for http://www.w3.org/TR/CSS21/visudet.html#min-max-widths as
far as I can tell.
-Boris
Received on Thursday, 13 October 2011 18:56:59 UTC