CSS自適應(yīng)圖片指的是根據(jù)瀏覽器窗口大小自動調(diào)整圖片大小的一種技術(shù)。下面將介紹css自適應(yīng)圖片的調(diào)整方法。

/*設(shè)置圖片寬度百分比*/
img{
width: 100%;
}
/*設(shè)置容器最大寬度*/
.container{
max-width: 960px;
margin: 0 auto;
}
/*設(shè)置不同尺寸圖片*/
@media screen and (min-width: 480px){
img{
width: 50%;
}
}
@media screen and (min-width: 768px){
img{
width: 33.3%;
}
}
@media screen and (min-width: 960px){
img{
width: 25%;
}
}

上述代碼中，我們首先給所有圖片設(shè)置了100%的寬度，這樣圖片就可以隨著窗口大小而自適應(yīng)了。接著，我們通過設(shè)置容器的最大寬度來限制圖片的最大寬度，避免在瀏覽器窗口特別大的情況下圖片過大導(dǎo)致布局混亂。

最后，我們通過媒體查詢來設(shè)置不同屏幕尺寸下的圖片大小。例如，當(dāng)屏幕寬度大于480px時，我們將圖片的寬度設(shè)置為50%，在屏幕寬度大于768px時，將圖片的寬度設(shè)置為33.3%。