CSS設(shè)置圖片大小是我們在網(wǎng)頁開發(fā)中經(jīng)常遇到的問題。通常情況下,當(dāng)我們對一個(gè)圖片進(jìn)行縮放時(shí),它會被裁剪成我們想要的尺寸。但是,如果我們想要保持一定的圖片尺寸同時(shí)又不希望圖片被裁剪,該怎么辦呢?下面,我們就來探討一下通過CSS實(shí)現(xiàn)圖片不被裁剪的方法。
img { max-width: 100%; height: auto; }
以上CSS代碼最為簡單,我們只需添加這一段CSS到
標(biāo)簽中,然后在標(biāo)簽中加入相應(yīng)的class名稱即可實(shí)現(xiàn)圖片不被裁剪。這段代碼主要利用了max-width屬性來設(shè)置圖片在容器內(nèi)最大可占用的寬度為100%。同時(shí),我們設(shè)置img的height屬性為auto,使其高度按比例自動調(diào)整。這樣,我們便可以在不改變圖片比例的情況下對圖片尺寸進(jìn)行縮放,同時(shí)還能保證圖片不被裁剪。