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

Fantasai wrote on Thursday, October 13, 2011 10:33 AM as part of 
Subject: [CSSWG] Minutes and Resolutions 2011-10-12:
> 
> Summary:
>    - Discussed dropping 'vm' unit or renaming it to 'vmin'.
> 
> 
> CSS3 Values and Units
> ---------------------

> TabAtkins: salvage min() it would be preferable 

....
> 
>    <ChrisL> fantasai/tab CSS 3 V@U issues
>             http://www.w3.org/Style/CSS/Tracker/products/8
>    fantasai: vm unit is really a v min unit: min of vh and vw
>    mollydotcom: vmin on its own make more sense
>    <fantasai> 5vmin == min(5vh, 5vw)
>    arronei: IE already implements vm
>    TabAtkins: we can see if there is any use in the wild of those
>    TabAtkins: not sure what the usecase of vmin
>    howcome: make sure your image does not get out of the viewport?
>    <fantasai> howcome, use max-height: 100vh; max-width: 100vw;
>    mollydotcom: can't imagine a usecase


....

>   <dbaron> TabAtkins, someday I should sit down with you and explain how
            hard min() and max() are...

I realize the above conversation took place in real time, but I believe it is more complicated than this to keep the image within the viewport.  In order to maintain the aspect ratio of the image, there will probably have to be a calc() involved for the width and height.

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]
}

I'm not sure how this would come out in CSS, but it does look like min or max would have to be involved.	


Hope this helps, 
Charles Belov 
SFMTA Webmaster

Received on Thursday, 13 October 2011 18:48:46 UTC