怎樣實現圖片大小自適應

圖片大小自適應

我們透過bootstrap可以很方便的實作圖片的自適應：

<img src="..." class="img-responsive" alt="Pic">

如果不打算引用bootstrap，透過純css，我們可以查看bootstrap中img-responsive類別的定義：

.img-responsive {    
    display: inline-block;    
    height: auto;    
    max-width: 100%;}

這樣我們就用純CSS完成了圖片自適應；
對程式碼說明：display是讓圖片以內斂形式呈現，而且可設定寬高；
然後再用max-width設定寬度，它可以覆蓋其他類別對該標籤width屬性的設定；height讓圖片高度自適應，同樣可以反過來設置，不過一般這種情況出現的更多。

以上是怎樣實現圖片大小自適應的詳細內容。更多資訊請關注PHP中文網其他相關文章！