模仿bootstrap寫響應式圖片佈局

黃寶康發表於2017-09-05
boot
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
    .img-responsive{
        display: block;
        height: auto;
        max-width: 100%;
    }
</style>
</head>
<body>
    <img src="hh.png" alt="" class="img-responsive" />
</body>
</html>

這表明相關的影象呈現為 inline-block。當您把元素的 display 屬性設定為 inline-block，元素相對於它周圍的內容以內聯形式呈現，但與內聯不同的是，這種情況下我們可以設定寬度和高度。
設定 height:auto，相關元素的高度取決於瀏覽器。
設定 max-width 為 100% 會重寫任何通過 width 屬性指定的寬度。這讓圖片對響應式佈局的支援更友好。

縮放瀏覽器大小，可以看到圖片的寬度高度會自動改變，而且的等比例縮放!

相關文章