Flexbox等高问题

Question

我正在尝试创建一个列表，其中包含每个包含文本和图像的项目。我正在使用 flexbox 来对齐文本和图像。

但是，我希望文本元素的高度 (.list-content) 定义图像元素的高度 (.list-img)，但我无法使其工作。

    .advanced-list {
      list-style: none;
      width: 85%;
    }
    
    .advanced-list li {
      display: flex;
      min-height: 80px;
      background-color: #eee;
    }
    
    .advanced-list li .list-img {
      display: block;
      overflow-x: hidden;
      flex: 1 0 33%;
    }
    
    .advanced-list li .list-img img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    
    .advanced-list li .list-content {
      padding: 10px;
    }
    
    .advanced-list li .list-content .list-header {
      margin-top: 0;
    }
    
    .advanced-list li .advanced-link {
      display: flex;
      color: #252525;
      text-decoration: none;
    }
    
    .advanced-list li .advanced-link:hover {
      background-color: #e7e6e6;
    }
    
    .advanced-list li + li {
      margin-top: 5px;
    }

    <ul class="advanced-list">
      <li>
        <div class="list-content">
          <h4 class="list-header">List item without link</h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat augue diam, id ornare neque mollis eu. Vivamus semper diam urna, in maximus felis sollicitudin eget. Vivamus sed mi at nunc condimentum placerat.
        </div>
        <div class="list-img">
          <img src="https://placehold.it/250x125?text=250x125" alt="Img title">
        </div>
      </li>
      <li>
        <a href="#" class="advanced-link">
          <div class="list-content">
            <h4 class="list-header">List item with link</h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat augue diam, id ornare neque mollis eu. Vivamus semper diam urna, in maximus felis sollicitudin eget. Vivamus sed mi at nunc condimentum placerat. Aenean eget gravida sem.
            Vestibulum mollis eros non fermentum rhoncus.
          </div>
          <div class="list-img">
            <img src="https://placehold.it/250x125?text=250x125" alt="Img title">
          </div>
        </a>
      </li>
    </ul>

请注意，有时可能会有 <a> 元素包裹内容。 此外，图像应占列表项宽度的 33%。

见fiddle here。

Answer 1

由于您的图片应基于文本的高度并为 33% 宽，请将 background-image 与 background-size: cover 结合起来。

这里我只是删除了img，并使用内联样式将图像源添加到标记中的list-img元素，当然您也可以将图像路径放在外部CSS中。

另一个选择是在img 上使用object-fit，认为它的浏览器支持比background-image 少。

Updated fiddle

堆栈sn-p

.advanced-list {
  list-style: none;
  width: 85%;
}

.advanced-list li {
  display: flex;
  min-height: 80px;
  background-color: #eee;
}

.advanced-list li .list-img {
  flex: 1 0 33%;
  background-position: center;
  background-size: cover;
}

.advanced-list li .list-content {
  padding: 10px;
}

.advanced-list li .list-content .list-header {
  margin-top: 0;
}

.advanced-list li .advanced-link {
  display: flex;
  color: #252525;
  text-decoration: none;
}

.advanced-list li .advanced-link:hover {
  background-color: #e7e6e6;
}

.advanced-list li + li {
  margin-top: 5px;
}

body {
  padding: 10px;
}

<ul class="advanced-list">
  <li>
    <div class="list-content">
      <h4 class="list-header">List item without link</h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat augue diam, id ornare neque mollis eu.
    </div>
    <div class="list-img" style="background-image: url(https://placehold.it/250x125?text=250x125)">
    </div>
  </li>
  <li>
    <a href="#" class="advanced-link">
      <div class="list-content">
        <h4 class="list-header">List item with link</h4> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus placerat augue diam, id ornare neque mollis eu. Vivamus semper diam urna, in maximus felis sollicitudin eget. Vivamus sed mi at nunc condimentum placerat. Aenean eget gravida sem.
        Vestibulum mollis eros non fermentum rhoncus.
      </div>
      <div class="list-img" style="background-image: url(https://placehold.it/250x125?text=250x125)">
      </div>
    </a>
  </li>
</ul>

Answer 2

将height: 100% 赋予img 标签。 希望这会对你有所帮助。

看到这个： http://jsfiddle.net/y5pxkbn1/4