Question

我尝试使用包含文字和图片的项目创建列表。我使用flexbox来对齐文本和图像。

但是，我希望文本元素（.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; }），但我无法使其工作。

＆＃13;

    <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>

＆＃13;

<a>

＆＃13;

请注意，有时可能会有一个{{1}}元素包装内容。此外，图像应填充列表项宽度的33％。

请参阅fiddle here。

Answer 1

将height: 100%提供给img代码。希望这会对你有所帮助。

看到这个： documentation

Answer 2

由于您的图片应基于文字的高度且宽度为33％，因此将background-image与background-size: cover合并。

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

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

Updated fiddle

Stack snippet

.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>

Flexbox等高度问题

2 个答案: