CSS圖片等高 在網(wǎng)頁(yè)設(shè)計(jì)中，我們通常會(huì)使用圖片來(lái)豐富頁(yè)面的內(nèi)容，但是在使用圖片時(shí)有時(shí)會(huì)遇到一個(gè)問(wèn)題，就是圖片的高度不同，這會(huì)造成頁(yè)面不美觀。下面我們來(lái)介紹一下如何通過(guò)CSS來(lái)實(shí)現(xiàn)圖片等高。 首先，我們需要了解一些CSS的相關(guān)知識(shí)，如何通過(guò)CSS來(lái)設(shè)置圖片的高度。在CSS中，可以通過(guò)設(shè)置元素的height屬性來(lái)設(shè)置元素的高度。例如： img{ height: 200px; } 上述代碼會(huì)將所有的img元素的高度設(shè)置為200px。但是，如果我們的圖片高度不同，則需要對(duì)每個(gè)圖片都設(shè)置不同的高度，這樣就很麻煩了。所以我們需要一個(gè)更簡(jiǎn)單的方法來(lái)實(shí)現(xiàn)圖片等高。 方法一：使用display:flex; 我們可以使用CSS3中的flex布局來(lái)實(shí)現(xiàn)讓圖片自適應(yīng)高度。我們只需要在包含圖片的元素上添加一個(gè)display:flex;就可以實(shí)現(xiàn)圖片等高了。例如： .container{ display: flex; } .container img{ flex:1; } 上述代碼會(huì)將所有.container下的img元素等分父容器的寬度，并且圖片的高度也將自動(dòng)調(diào)整為相等。 方法二：使用object-fit屬性 使用object-fit屬性，同樣可以實(shí)現(xiàn)圖片等高。object-fit屬性用于規(guī)定元素內(nèi)容的填充方式，包括fill、contain、cover等。我們可以使用contain或cover來(lái)讓圖片占滿(mǎn)容器，例如： .container img{ width: 100%; height: 100%; object-fit: cover; } 上述代碼會(huì)讓所有.container下的img元素占滿(mǎn)容器，并且圖片的高度也將自動(dòng)調(diào)整為相等。 以上就是兩種常用的實(shí)現(xiàn)圖片等高的方法，希望對(duì)大家有所幫助。