CSS自動(dòng)調(diào)整圖片大小

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

當(dāng)我們?cè)诰W(wǎng)頁(yè)中插入圖片時(shí)，往往產(chǎn)生了圖片尺寸過大或者過小的問題。為了避免這樣的情況，我們可以使用CSS對(duì)圖片進(jìn)行大小的自動(dòng)調(diào)整。

其中，max-width: 100%是指將圖片寬度設(shè)置為父元素的100%，也就是說，當(dāng)圖片所在的容器發(fā)生變化時(shí)，圖片的寬度也會(huì)自動(dòng)調(diào)整，保證圖片不會(huì)超出容器的范圍。而height: auto;的作用則是根據(jù)圖片的實(shí)際比例來動(dòng)態(tài)計(jì)算高度。

使用這種方法能夠讓我們的網(wǎng)頁(yè)看起來更加美觀，也更加符合響應(yīng)式設(shè)計(jì)的原則。