CSS手機(jī)自適應(yīng)圖片

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

在移動(dòng)設(shè)備上顯示圖片時(shí)，我們需要使用CSS來調(diào)整圖片的寬度和高度，以適應(yīng)不同的屏幕尺寸。為此，我們可以利用CSS的“max-width”屬性來設(shè)置圖片的寬度不超過屏幕寬度，同時(shí)設(shè)置“height:auto”來保持圖片比例不變。

此外，我們還可以使用“@media”查詢來針對(duì)不同的屏幕尺寸設(shè)置不同的CSS。例如，我們可以使用以下代碼來在小屏幕上隱藏大圖片，以避免加載時(shí)間過長(zhǎng)。

@media (max-width: 768px) {
img.big {
display: none;
}
}

上述代碼中，當(dāng)屏幕寬度不超過768像素時(shí)，圖片類名為“big”的圖片將不會(huì)顯示。

總之，使用CSS來實(shí)現(xiàn)手機(jī)自適應(yīng)圖片可以讓我們的網(wǎng)站更加響應(yīng)式和用戶友好。