0

我已经搜索过许多类似的问题，但似乎没有一个能完全涵盖我正在寻找的内容。

基本上我希望用 flexbox 制作相等的宽度和高度列，一个带有实际图像标签，一个只带有文本。图像必须是使用 object-fit:cover 而不是背景图像的图像标记。

我已经很接近了，但是当容器太宽时，文本列的高度与图像的高度匹配，而不是相反，在文本下方留下一个很大的丑陋空间，我真的希望将其删除。

下面的链接图像显示了我希望删除的部分列。

到目前为止，我已经创建了一个 Codepen：

https://codepen.io/ash-media/pen/Vwmoebj

Codepen 的 HTML 代码如下：

<section class="block-image-text">
  <div class="col col-image">
    <img src="https://images.unsplash.com/photo-1485199433301-8b7102e86995?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1980&q=80" />
  </div>
  <div class="col col-text">
    <h2>Something Awesome</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum laoreet dui nisl, vel convallis lectus tempus et. Duis malesuada ligula dolor. In hac habitasse platea dictumst. Cras non lacinia odio. Maecenas aliquam porta turpis. Suspendisse dignissim viverra leo, nec commodo nibh iaculis a. Phasellus nec turpis sit amet erat porttitor elementum id et metus. Morbi mattis sit amet tortor ut dignissim. Integer pulvinar libero diam, ut volutpat nunc bibendum in. Sed ac felis gravida, egestas elit id, scelerisque turpis. Cras scelerisque eu urna quis malesuada. Etiam viverra nulla neque, vitae pretium tortor lobortis eu.</p>
    <p>Vivamus eget urna sed ex tincidunt ultricies sit amet id urna. Proin et massa ornare, interdum ipsum eget, dignissim nisl. Maecenas libero orci, aliquam a hendrerit sit amet, laoreet quis ante. Pellentesque ultricies leo in mattis accumsan. Morbi sagittis mattis sapien placerat dapibus. Pellentesque nisi elit, hendrerit vitae mattis vestibulum, laoreet sed nunc. Praesent quis aliquam libero, imperdiet accumsan risus. Aliquam erat volutpat. Fusce ornare odio nunc, a volutpat tellus molestie venenatis.</p>
  </div>
</section>

CSS如下：

.block-image-text {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.block-image-text .col {
  flex: 1;
}
.block-image-text .col:nth-child(1) {
  order: 0;
}
.block-image-text .col:nth-child(2) {
  order: 1;
}
.block-image-text .col-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.block-image-text .col-text {
  padding: 0 20px;
  background: #CCC;
}

@media screen and (min-width: 768px) {
  .block-image-text {
    flex-direction: row;
  }
}

虽然不是问题的一部分，但它会在较窄的宽度上切换到垂直布局，所以请忽略它。这是我在 StackOverflow 上的第一个问题，所以如果我做错了什么，请放轻松。

提前致谢！

此图像显示了不应存在的两列部分

4

0 回答 0