色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

css自適應圖片怎么調

錢良釵2年前10瀏覽0評論

CSS自適應圖片指的是根據瀏覽器窗口大小自動調整圖片大小的一種技術。下面將介紹css自適應圖片的調整方法。

/*設置圖片寬度百分比*/
img{
width: 100%;
}
/*設置容器最大寬度*/
.container{
max-width: 960px;
margin: 0 auto;
}
/*設置不同尺寸圖片*/
@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%;
}
}

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

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