CSS3如何固定圖片寬度使圖片高度按圖片比例自適應(yīng)?

使用img標簽，給它的width屬性設(shè)定一個絕對數(shù)量值，其高度就會自動按照width的值進行縮放了。

創(chuàng)新互聯(lián)建站專業(yè)IDC數(shù)據(jù)服務(wù)器托管提供商，專業(yè)提供成都服務(wù)器托管，服務(wù)器租用，托管服務(wù)器，托管服務(wù)器，成都多線服務(wù)器托管等服務(wù)器托管服務(wù)。

viewport是網(wǎng)頁默認的寬度和高度，上面這行代碼的意思是，網(wǎng)頁寬度默認等于屏幕寬度（width=device-width），原始縮放比例（initial-scale=1）為0，即網(wǎng)頁初始大小占屏幕面積的100%。所有主流瀏覽器都支持這個設(shè)置，包括IE9。

寬度和高度不要同時設(shè)置，只需要設(shè)置一個，另一個就會自動按照圖片的原始比例進行縮放，從而使圖片不會發(fā)生變形。

背景圖的話css3的背景縮放：background-size，不兼容低版本ie。最好的辦法就是js取得父級的寬高，然后把根據(jù)這個寬高給img或背景圖定義相同的寬高。

用CSS2及CSS3彈性盒兩種方式實現(xiàn)如下布局,要求自適應(yīng)瀏覽器窗口寬高...

PS：當然還有一些方法，比如css3的flex-box布局，用flex布局的話，非常的方便可以實現(xiàn)多種自適應(yīng)布局，但是，只適用于移動端，PC端上面只有高版本的瀏覽器才兼容，低版本的瀏覽器是不兼容的。

但是瀏覽器都不識別，寬度倒是自適應(yīng)的，但是高度始終都在150px左右，如下圖，顯示效果不佳。

彈性盒子模型的最大特征在于動態(tài)修改子元素的寬度和高度，以滿足在不同尺寸屏幕下的恰當布局。說明 ：盒子模型的內(nèi)容范圍包括內(nèi)容(content)、內(nèi)邊距(padding)、邊框(border)和外邊距(margin)。

CSS使圖片自適應(yīng)顯示寬度代碼怎么用?

500px：this.width+px}；return ’120px’ 載入時顯示寬度為120px}(this))；} 利用的onload 事件使圖片載入完成后計算其尺寸大小，如果超過500畫素就顯示為500畫素，否則顯示其預(yù)設(shè)寬度。

首先，打開html編輯器，新建html文件，例如：index.html。在index.html中的標簽中，輸入css代碼：body {background： url(image12jpg) no-repeat； background-size： cover；}。

首先需要新建一個HTML頁面。然后輸入頁面的標題，可以按照下方圖中的進行設(shè)置。