用css讓圖片可以置中且保持比例縮放於指定框尺寸

2017-02-14
preview

HTML:
<div class="frame">
  <img src="foo"/>
</div>

CSS:
.frame {  
    height: 160px; /*can be anything*/
    width: 160px; /*can be anything*/
    position: relative;
}
img {  
    max-height: 100%;  
    max-width: 100%; 
    width: auto;
    height: auto;
    position: absolute;  
    top: 0;  
    bottom: 0;  
    left: 0;  
    right: 0;  
    margin: auto;
}

來源: https://jsbin.com/lidebapomi/edit?html,css,output

Contact

Github

Codepen

歡迎參觀我的賣場
© 2013 Copyright Digishot Web | Design Tools
Visitors【102463】
digishot webdesign studio