今天我們來聊一下關(guān)于屏幕大小圖片固定的CSS問題。當(dāng)我們?cè)诰W(wǎng)頁上設(shè)置一些圖片時(shí),有時(shí)候我們希望圖片能夠隨著屏幕大小自動(dòng)調(diào)整大小,而有時(shí)候我們又希望圖片能保持一定的大小,隨著屏幕縮放而不改變大小,這時(shí)候就需要用到CSS來控制了。
首先,我們可以用以下的CSS代碼來讓一張圖片隨著屏幕大小自動(dòng)調(diào)整大小:
img { max-width: 100%; height: auto; }這個(gè)代碼的意思是,讓圖片的最大寬度不能超過其父元素的寬度,同時(shí)讓圖片的高度自適應(yīng),這樣圖片就能夠隨著屏幕大小自動(dòng)調(diào)整大小了。 不過,有時(shí)候我們并不想讓圖片隨著屏幕大小自動(dòng)調(diào)整大小,而是希望讓圖片保持一定的大小,隨著屏幕縮放而不改變大小。這時(shí)候,我們可以用以下的CSS代碼來實(shí)現(xiàn):
img { width: 500px; height: 300px; }這個(gè)代碼的意思是,設(shè)置圖片的寬度為500像素,高度為300像素,這樣無論屏幕大小如何變化,圖片的大小都將保持不變。 總之,根據(jù)需求來選擇合適的CSS代碼來控制圖片的大小,才能讓我們的網(wǎng)頁顯示更加美觀。
上一篇css邊框厚度
下一篇css邊框半四周有陰影