html - how to get a image to be either the full browser width or height depending on which is smaller -
i have square image want fill of users browser possible without overflow. problem on devices width greater height , vice versa. therefore if set width 100% on devices cause height overflow. how can set image load square , 100% width, if width smaller height , 100% height, if height smaller width? thanks
you can use vmin value:
<div></div> div { width: 100vmin; height: 100vmin; background: green; }
note, in ie9 need use vm instead on vmin: http://caniuse.com/#feat=viewport-units
Comments
Post a Comment