css - 100% height OR 100% width -


how make image fills tile set size no matter , keep aspect ratio? instance, if image wide enough expands tall enough overflow hidden , vice versa. have far if image needs adjust 100% height doesn't expand width beyond box , leaves image distorted.

.box{    width: 100px;    height: 100px;    overflow: hidden; } .image{    min-width: 100%;    min-height: 100%; }  <div class="box">   <img class="image" src="/img.jpg"> </div> 

another alternative css way utilize cover

  background: url(images/bg.jpg) no-repeat center center fixed;    background-size: cover; 

see source details: https://css-tricks.com/almanac/properties/b/background-size/


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -