<address id="r9vd9"><address id="r9vd9"><listing id="r9vd9"></listing></address></address>
      



      

      

      
	
      
		歡迎您光臨深圳塔燈網絡科技有限公司！
		
      
		  電話圖標 余先生：13699882642 
		
      
	
      

      

      


      

      








 


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

      



      
	
      
		
	
      


	
      
		
      

		
			
      


				
      
					
      HTML/HTML5 設置img(圖片)自適應div(容器)
      
					
      發表日期：2019-09    文章編輯：小燈    瀏覽次數：29999
      
				
      
				
      
				
      我的另一網站 CODE大全，使用的 bootstrap 搭建的。但是對于博客中引入的圖片總是不能隨著移動端的適配進行友好的展示。今天查閱了一些相關資料，進行了優化，在這里做個總結！
      做法很簡單，只要設置對應圖片的width和htight的具體數值就可以了?？聪旅娴睦樱?/p>
      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.webpost.com.cn/21071.html					
      
				
      


				
					

				
					
				
			
      



			
			
      
				
      
								
       
      
				
      相關前端設計
      
				
			   
      

		    
      

			
      

		
      
		
		
		
		
		

	
      
	
	
	

      



      
	
      
		
      
			
      
			 八年 
			行業經驗
			
      
			
      
				
      多一份參考，總有益處
      
				
      聯系深圳網站公司塔燈網絡，免費獲得網站建設方案及報價
      
				
      
					
      咨詢相關問題或預約面談，可以通過以下方式與我們聯系
      
					
      業務熱線：余經理：13699882642
					
      
				
      
			
      
		
      
		
	
      

      

	


      

      

      

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


      

      



      

      




      
	

      






 



	
	



 

国产成人精品综合在线观看