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:

http://jsfiddle.net/bt2s86vu/

<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

Popular posts from this blog

php - Invalid Cofiguration - yii\base\InvalidConfigException - Yii2 -

How to show in django cms breadcrumbs full path? -

ruby on rails - npm error: tunneling socket could not be established, cause=connect ETIMEDOUT -