[摘要]

你肯定知道width百分比可以實現圖片寬度的自適應，那么你知道高度也可以根據寬度變話而自適應比變化么，看下本文就了解了！

當前響應式布局，內容尺寸自適應設備是眾多網站開發者的選擇，畢竟現在顯示器、筆記本、移動設備的尺寸太過于繁多了，其中大家都知道使用width="100%"樣式可以實現元素的自適應寬度，但是讓元素的高度根據寬度變化而變化卻并不能直接通過css簡單實現。下面咱們舉個栗子...

比如，我在布局的時候想要實現一個橫向排列的圖片效果，要求是圖片能夠根據屏幕的大小自動調整，以四張圖片為例，我們很簡單的就能實現，直接給讓圖片所在的元素寬度為25%就可以了啊。但是如果圖片的寬高比例并不相同，那么就會出現下圖的情況：四張圖片的寬度是相同的，但是高度卻參差不齊，視覺效果差。

圖片高度參差不齊

下面貼出demo代碼，大家可以在本地調試。(代碼中圖片路徑請自行修改)

圖片高度自適應demo

*{margin: 0; padding: 0; border: 0;}

ul,ol,li{list-style: none;}

.wrap{margin: 100px auto 0; width: 600px; padding: 10px; border: 1px dashed #3e3e3e; overflow: hidden;}

.wrap p{font-size: 16px; font-weight: bold; text-align: center; height: 30px; line-height: 30px;}

.wrap span{float: right; display: inline-block;}

.wrap ul{overflow: hidden;}

.wrap ul li{float: left; width: 23%; padding: 1%}

.wrap ul li img{width: 100%;}

圖片高度自適應demo

demo by yaxi.net

此時如果想讓圖片高度都保持一樣，我們可以給圖片自定義高度，但如果圖片寬度變化了，高度是不會跟著變的，就會出現圖片變形的情況。

那么這個時候就要解決圖片高度的自適應問題了，由于當前瀏覽器都是從上而下瀏覽，頁面高度隨著內容的變化而變化，并不像寬度一樣是固定的，使用百分百比的height顯然不現實。這就需要請出來js大法了，將下例js代碼放入demo中，刷新頁面后整個頁面變得整潔美觀，強迫癥們表示太棒了。

//元素高度自適應寬度

$(function(){

var ratio = 0.8;/*此處是寬高比例*/

var liWidth = $('.wrap ul li').width();/*括號中為父元素選擇器*/

var liHeight = liWidth * ratio;

$('.wrap li img').width( liWidth );

$('.wrap li img').height( liHeight );

});

添加高度自適應js代碼后

查看元素后我們可以看出，此段js給圖片增加了行內樣式，所以此時如果再調整瀏覽器寬度，圖片寬高并不會變化。

需要注意的是，本例依托于jquery框架，所以需要在網頁

里引入jquery.js文件。其中ratio=0.8是指你想要實現的圖片寬高比例；liWidth是圖片父元素寬度，圖片會自動適應此寬度，注意代碼中元素選擇器的填寫。

有些前端基礎的朋友估計也懂了，此代碼不僅適用于圖片，所有的塊狀元素都可以通過此代碼來實現寬高固定比例的，這樣一來在自適應布局上就簡單很多了。

本文代碼兼容主流瀏覽器(包括IE)，需提前引入jquery文件，代碼簡潔卻有大功能，可以說是響應式布局的一個神器了。

本文最后更新于2016年12月5日，已超過 1 年沒有更新，如果文章內容或圖片資源失效，請留言反饋，我們會及時處理，謝謝！

總結

以上是生活随笔為你收集整理的html 图片高度 页面高度自适应,怎样让网页图片高度自适应宽度的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。