在CSS中,我們經(jīng)常需要給網(wǎng)頁中的圖片設置高度。但是,你知道嗎?在給圖片設置高度的時候,同時也決定了它所在元素的高度。
具體來說,如果一個圖片的高度被設置為100px,且沒有設置寬度,那么它所在元素的高度也會被自動設置為100px。
img { height: 100px; }
當然,如果你也同時設置了寬度,那么會根據(jù)圖片的寬高比自適應縮放。
img { height: 100px; width: auto; }
這個特性也可以用來撐開一個元素的高度。比如,你想在一個div內(nèi)顯示一個固定高度的圖片,并讓div的高度自適應圖片高度,就可以這樣寫:
div { height: 100px; } img { height: 100%; width: auto; }
這樣做可以確保圖片不會超出div的高度,同時div的高度也會被撐開至100px。
總之,在使用CSS設置圖片高度時,同時也要考慮所在元素的高度。這個小特性也許可以幫助你更方便地實現(xiàn)一些效果。