Css 如何使用Bootstrap将图像水平对齐，使其顶部和底部位于同一水平线上

发布于10月11日

        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-8 col-md-8 col-10">
                    <div class="row justify-content-center g-4">
                        <div class="col-lg-6 col-md-6 col-6">
                            <img class="width-10" src="/image-500x500.png" alt="">
                        </div>
                        <div class="col-lg-6 col-md-6 col-6">
                            <img class="width-10" src="/image-500x500.png" alt="">
                        </div>
                        <div class="col-lg-12 col-md-12 col-12">
                            <img class="width-10" src="/image-1000x500.png" alt="">
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4 col-md-4 col-10">
                    <div class="row justify-content-center"> 
                        <div class="col-lg-12 col-12">
                            <img class="width-10" src="/image-500x1000px.png" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>

这是我的样例代码. 我希望有人能帮我解决我的问题.谢谢.

想要图像的顶部和底部在同一水平线上

推荐答案

这是一款100%宽度、响应性强的非 bootstrap 解决方案.没有Bootstrap就够简单的了，为什么要把它变得比需要的更复杂呢？

你的样本图像的问题是，如果图像之间有间隙，那么数学就不起作用.您是否希望右侧的高大图像比1000px稍高一点，以说明第一行和第二行之间的差距？或者你想让左下角的宽图像略短于500px？任何一种都是可能的.

我 Select 了第一个选项，让高个子的形象稍微高一点.所以我把它放在一个容器里，这样我就可以使用object-fit: cover;.

body {
  margin: 20px;
}
.layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.layout>*:nth-child(3) {
  grid-row: 2;
  grid-column: 1 / span 2;
}

.layout>*:nth-child(4) {
  grid-row: 1 / span 2;
  grid-column: 3;
}

.layout img {
  max-width: 100%;
}

.layout>*:nth-child(4) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="layout">
  <img src="https://picsum.photos/500">
  <img src="https://picsum.photos/500">
  <img src="https://picsum.photos/1000/500">
  <div>
    <img src="https://picsum.photos/500/1000">
  </div>
</div>