在網(wǎng)頁設(shè)計(jì)中，如果想要使用圖片，通常會(huì)通過HTML的img標(biāo)簽進(jìn)行插入。但是，在有些情況下，圖片會(huì)因?yàn)檎故镜膮^(qū)域大小而導(dǎo)致變形。如果你希望在沒有失真的前提下，讓圖片在網(wǎng)頁中展示出更好的效果，就需要用到CSS的一些技巧。

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

使用img標(biāo)簽插入圖片時(shí)，圖片的寬高比是按照圖片原本的尺寸來計(jì)算的。如果展示圖片的區(qū)域比原圖的比例不一致，就會(huì)導(dǎo)致變形。而上述代碼的作用就是讓圖片在展示時(shí)，根據(jù)展示區(qū)域的大小自適應(yīng)調(diào)整尺寸，使得圖片不會(huì)出現(xiàn)變形的情況。

這里，max-width的值為100%表示圖片最大寬度為展示區(qū)域的寬度，如果展示區(qū)域足夠大，圖片也會(huì)按照它本來的尺寸展示。height的值為auto，表示高度隨寬度的比例自動(dòng)調(diào)整。

可以看到，這段代碼非常簡單，但是可以解決圖片變形的問題，使得頁面更加美觀。這是CSS設(shè)計(jì)中一個(gè)小而實(shí)用的技巧，相信程序員們都應(yīng)該掌握。