W3C home > Mailing lists > Public > www-style@w3.org > October 2011

Re: [css3-values] Keeping image entirely within viewport - vm vs. min vs. calc

From: Boris Zbarsky <bzbarsky@MIT.EDU>
Date: Thu, 13 Oct 2011 14:56:29 -0400
Message-ID: <4E97345D.7020205@mit.edu>
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 GMT

This archive was generated by hypermail 2.3.1 : Tuesday, 26 March 2013 17:20:45 GMT