国产亚洲欧美人成在线,免费视频爱爱太爽了无码,日本免费一区二区三区高清视频 ,国产真实伦对白精彩视频

歡迎您光臨深圳塔燈網(wǎng)絡(luò)科技有限公司！
電話圖標(biāo) 余先生：13699882642

網(wǎng)站百科

為您解碼網(wǎng)站建設(shè)的點(diǎn)點(diǎn)滴滴

HTML/HTML5 設(shè)置img(圖片)自適應(yīng)div(容器)

發(fā)表日期：2019-09 文章編輯：小燈 瀏覽次數(shù)：29928

我的另一網(wǎng)站 CODE大全，使用的 bootstrap 搭建的。但是對(duì)于博客中引入的圖片總是不能隨著移動(dòng)端的適配進(jìn)行友好的展示。今天查閱了一些相關(guān)資料，進(jìn)行了優(yōu)化，在這里做個(gè)總結(jié)！

做法很簡(jiǎn)單，只要設(shè)置對(duì)應(yīng)圖片的width和htight的具體數(shù)值就可以了?？聪旅娴睦樱?/p>

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

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

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

max-width 和 max-height，優(yōu)先對(duì)max-width進(jìn)行縮放，當(dāng)圖片在max-width縮放后的尺寸仍然超出容器大小時(shí)。max-height就發(fā)揮了作用：對(duì)圖片再次進(jìn)行縮放！舉例：

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

圖片被縮放后在div的尺寸是：
width:50px;（因?yàn)閳D片的width:100%）
height:50px（這里height是有width:100%被縮放后的尺寸。）
我們可以發(fā)現(xiàn)這個(gè)50px的高度仍然超出了div的40px的高度,不符合max-height
這個(gè)時(shí)候，max-height:100%;就會(huì)發(fā)揮作用，
在max-height:100%;的作用下，圖片被縮放后在div的尺寸是：
width:40px;
height:40px;
這個(gè)尺寸符合max-height和max-width
所以，當(dāng)div在不斷變化時(shí)，圖片在div中也會(huì)跟著布斷發(fā)生變化，
這里不介意給圖片設(shè)置width:100%;height:100%；會(huì)造成圖片變形。

完整例子

<!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>


本頁內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://m.jstctz.cn/21071.html
相關(guān)前端設(shè)計(jì)
 八年  行業(yè)經(jīng)驗(yàn)

多一份參考，總有益處

聯(lián)系深圳網(wǎng)站公司塔燈網(wǎng)絡(luò)，免費(fèi)獲得網(wǎng)站建設(shè)方案及報(bào)價(jià)

咨詢相關(guān)問題或預(yù)約面談，可以通過以下方式與我們聯(lián)系

業(yè)務(wù)熱線：余經(jīng)理：13699882642

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.