本文目錄導(dǎo)讀：

1. 使用CSS Flexbox布局
2. 使用CSS Grid布局

CSS技巧：確保兩個圖片具有相同高度

在網(wǎng)頁設(shè)計中，保持元素的對齊和一致性***關(guān)重要，有時，我們可能需要讓兩個圖片具有相同的高度，無論其原始尺寸如何，下面是一些使用CSS來實現(xiàn)這一目標(biāo)的技巧。

使用CSS Flexbox布局

Flexbox布局是一種強大的CSS布局方式，可以輕松實現(xiàn)元素的對齊，對于圖片，我們可以將包含圖片的容器設(shè)置為flex項，并使用align-items屬性來垂直對齊。

.container {
  display: flex;
  align-items: stretch; /* 或者使用align-content: stretch; */
}
.img-item {
  height: 100%; /* 使圖片高度與容器高度相同 */
}

使用CSS Grid布局

CSS Grid布局是另一種強大的布局方式，適用于創(chuàng)建復(fù)雜的網(wǎng)頁結(jié)構(gòu)，對于需要相同高度的圖片，可以使用grid-template-rows來定義行的高度。

.grid-container {
  display: grid;
  grid-template-rows: auto 1fr auto; /* 定義行的高度 */
}
.img-item {
  grid-row: 2; /* 將圖片放置在第二行 */
  height: 100%; /* 使圖片高度與行高度相同 */
}

三、使用百分比高度和CSS的object-fit屬性

我們還可以直接設(shè)置圖片的高度為百分比，并使用object-fit屬性來控制圖片的填充方式。

.img-item {
  height: 100%; /* 設(shè)置圖片高度為容器高度的百分比 */
  object-fit: cover; /* 保持圖片的縱橫比，同時填充整個容器 */
}

方法都可以確保兩個圖片具有相同的高度，但具體使用哪種方法取決于你的布局需求和瀏覽器兼容性要求，在實際應(yīng)用中，可以根據(jù)具體情況選擇***合適的方法。