利用CSS Flex將圖片高寬度max100%對應外部區塊,上下垂直左右置中顯示於區塊中,這樣一來不管圖片大小多大,圖片都能正常比例完整顯示於區塊中。

注意:Flex只支援較新的瀏覽器。

HTML

<div class="box"> 
     <img class="imgcenter" src="http://p3.pstatp.com/origin/2ee200021b01de8df129"> 
</div>

CSS

.box{ 
      width: 800px; 
      height: 600px; 
      border: 1px solid #f00; 
      margin: auto; 
      display: flex; 
      justify-content: center; 
      align-items: center; 
} 
.imgcenter{ 
     max-width:100%; 
     max-height:100%; 
} 

DEMO

您也可能喜歡這些文章

SEO優化之CSS隱藏關鍵文字

想使用CSS將不必要,但可以增加SEO的關鍵文字隱藏,想要讓google大神搜尋到,又不想在網頁上HTML顯示你這些文字,可以使用下列CSS方法隱藏文字。...