CSS——<img>標籤圖片適配置中問題

標籤：width   top   比例   效果   isp   延時   計算   src   auto   

圖片標籤為<img>，為單閉合標籤，使用時<img src="./im.png" alt="花"/>

必選屬性:

• alt    映像的替代文本
• src   規定顯示映像的URL

img屬於行內替換元素，可以使用height/width/padding/margin均可以使用，效果等效於塊元素。如果設定了width但未設定height，那麼img的height會根據比例縮放。

 

如何讓圖片在div中置中顯示？

1、對div使用text-align屬性將圖片水平置中，同時使用padding-top值使其垂直置中。

2、利用圖片的margin屬性或者div的padding屬性計算後置中。

3、將其轉化塊元素（display:block）然後對其設定margin:0 auto;

 

圖片自動適應DIV容器大小：

1.設定div容器的大小，裡面img的寬度設定為寬和高100%；

2.img的屬性是設定一個寬或者高值時，另一個值就會等比例縮放，如果遇到這樣的，也可以使用js來判斷圖片哪個大，然後根據大的值設定固定值，從而使學習圖片適配（這種方式也長用在延時載入圖片情境，通過js監測視窗的大小來判斷載入不同分配率的圖片，對於行動裝置下載的圖片會小一些）。

 

CSS——<img>標籤圖片適配置中問題