CSS的圖片對齊設置可以讓我們在網(wǎng)頁中更好地控制圖片的顯示效果。其中,圖片底部對齊是一種常用的設置方式,下面就來介紹一下。
首先,我們在HTML中嵌入一張圖片:
<img src="example.jpg" />
然后,在CSS中設置圖片樣式:
img { display: block; margin: 0 auto; max-width: 100%; height: auto; vertical-align: bottom; }
其中,display: block;
將圖片設置為塊級元素;margin: 0 auto;
使圖片水平居中;max-width: 100%;
將圖片寬度設置為父容器的百分百寬度,防止圖片溢出;height: auto;
保證圖片按比例縮放;vertical-align: bottom;
將圖片底部與行框底部對齊。
這樣,我們就可以輕松地實現(xiàn)圖片底部對齊了。