網站百科

為您解碼網站建設的點點滴滴

首頁 > > 網站建設知識 > 建站知識 > 前端設計

企業建站知識推廣知識小程序微信營銷 APP開發前端設計 MindManager 開發語言自媒體

HTML/HTML5 設置img(圖片)自適應div(容器)

發表日期：2019-09 文章編輯：小燈瀏覽次數：30013

我的另一網站 CODE大全，使用的 bootstrap 搭建的。但是對于博客中引入的圖片總是不能隨著移動端的適配進行友好的展示。今天查閱了一些相關資料，進行了優化，在這里做個總結！

做法很簡單，只要設置對應圖片的width和htight的具體數值就可以了。看下面的例子：

img{ width:auto; height:auto; max-width:100%; max-height:100%;}

這樣設置圖片的話，可以使圖片在指定的空間內縮放。4行的意思是：

width:auto;圖片的寬度自己適應(圖片有多寬就顯示多寬)
height:auto;圖片的高度自己適應(圖片有多高就顯示多高)
width:auto;和height:auto;一起使用就代表著顯示圖片的原始尺寸(可以理解為沒有什么作用)
max-width:100%;圖片的寬度不能超過圖片所在的空間的寬度
max-height:100%;圖片的高度不能超過圖片所在的空間的高度
max-width:100%;max-height:100%;一起使用就代表這圖片的寬高尺寸最大不能超過它所在的空間的寬高。

max-width 和 max-height，優先對max-width進行縮放，當圖片在max-width縮放后的尺寸仍然超出容器大小時。max-height就發揮了作用：對圖片再次進行縮放！舉例：

<div style="width:50px;height:40px"><img src="a.jpg"><!--這里我們假如圖片的實際尺寸是320X320--></div>

圖片被縮放后在div的尺寸是：
width:50px;（因為圖片的width:100%）
height:50px（這里height是有width:100%被縮放后的尺寸。）
我們可以發現這個50px的高度仍然超出了div的40px的高度,不符合max-height
這個時候，max-height:100%;就會發揮作用，
在max-height:100%;的作用下，圖片被縮放后在div的尺寸是：
width:40px;
height:40px;
這個尺寸符合max-height和max-width
所以，當div在不斷變化時，圖片在div中也會跟著布斷發生變化，
這里不介意給圖片設置width:100%;height:100%；會造成圖片變形。

完整例子

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style>img{width: auto;height:auto;max-height: 100%;max-width: 100%;}</style></head><body><div id="div" style="width: 50px;height: 50px;"><img src="../5100036_080649087294_2.jpg" /></div><script>window.onload=function(){setInterval(function(){move();},1000);} function move(){var _width=document.getElementById('div').style.width.replace('px','');if(parseInt(_width)>400){document.getElementById('div').style.width=parseInt(_width)-5+'px';document.getElementById('div').style.height=parseInt(_width)-5+'px';}else{document.getElementById('div').style.width=parseInt(_width)+5+'px';document.getElementById('div').style.height=parseInt(_width)+5+'px';}}</script></body></html>

本頁內容由塔燈網絡科技有限公司通過網絡收集編輯所得，所有資料僅供用戶學習參考，本站不擁有所有權，如您認為本網頁中由涉嫌抄襲的內容，請及時與我們聯系，并提供相關證據，工作人員會在5工作日內聯系您，一經查實，本站立刻刪除侵權內容。本文鏈接:http://www.juherenli.com/21071.html

上一篇：<微信小程序 wx:if wx:elif wx:else 多條件判斷下一篇：免費的 Web 視頻播放器 Projekktor>