javascript - 如何设置相对于其他元素的图像大小

Question

我有一个 div 包含一个无序列表和一个图像。
目前，图像更大，从而增加了 div 的大小。

我希望图像与无序列表具有相同的高度，如下所示：

如何使用 HTML/CSS/js 做到这一点？

    .container {
      display: flex;
    }

    .list {
      list-style-type: none;
    }

   .picture{
      max-width: 100%;
      height: auto;
    }

<div class="container">
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <div>
        <img src="https://upload.wikimedia.org/wikipedia/commons/e/ee/Sample_abc.jpg" class="picture" />
    </div>
</div>

示例： https ://jsfiddle.net/ck26ybg4/

标签： javascripthtmlcss

Answer 1

还有一种方法可以去掉img，添加一张图片作为背景图片，例如：

.container {
  width: 50%;
  display: grid;
  grid-auto-flow: column;
  border: 1px solid red;
  margin-bottom: 10px; /* demo only */
}

.list {
  margin: 0;
  padding: 0;
}

.picture{
  border: 1px solid green;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

<div class="container">
  <ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>

  </ul>
  <div class="picture" style="background-image:url(https://via.placeholder.com/728x90.png)"></div>
</div>

<div class="container">
  <ul class="list">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
  <div class="picture" style="background-image:url(https://via.placeholder.com/728x90.png)"></div>
</div>