CSS是一種設(shè)計網(wǎng)頁的語言,可以控制網(wǎng)頁的外觀和布局。其中,固定圖片的長寬比是CSS中的一個重要的應(yīng)用。通過控制CSS樣式表中的寬度和高度參數(shù),可以實現(xiàn)圖片自適應(yīng)大小,同時固定它的寬高比。
img { width: 200px; height: auto; }
在上面的代碼中,我們將圖片的寬度設(shè)置為200像素,同時讓高度自適應(yīng)變化。這樣就實現(xiàn)了圖片寬度的固定,而高度也是按照圖片原有的長寬比例自適應(yīng)變化。另外,我們也可以將高度設(shè)置為固定值,同時讓寬度自適應(yīng)變化。
img { height: 300px; width: auto; }
當(dāng)然,如果我們希望圖片在保持原有寬高比的同時,能夠自適應(yīng)容器的大小,也可以使用以下的代碼:
img { max-width: 100%; height: auto; }
在這個代碼中,max-width屬性的值為100%,表示圖片的寬度不會超過容器的大小,同時高度會按照原有的長寬比例進(jìn)行調(diào)整。
通過以上的代碼,我們就可以實現(xiàn)CSS圖片的固定長寬比,讓網(wǎng)頁在顯示圖片的同時,也能夠保持整潔的布局。