按最小内容的 div 包装器宽度

Question

我用物品排成一行。每个项目都包含一个标题、图像和按钮。图像保持其纵横比。 我不明白为什么 wrapper 会添加空格。

沙盒： https://codepen.io/krosert/pen/QWNNVxg

现在结果：

预期结果：

代码：

    <div class="panel">
      <div class="item">
        <span class="title">first item</span>
        <img src="https://i.ibb.co/JQMJ3BW/2311f3c1-2802-417f-9b7e-2147f066e260.jpg">
        <div class="btns">
          <button>1</button>
          <button>2</button>
          <button>3</button>
        </div>
      </div>
      <div class="item">
        <span class="title">second item</span>
        <img src="https://i.ibb.co/wMyyz1n/934tvi5uykv2.jpg">
        <div class="btns">
          <button>1</button>
          <button>2</button>
          <button>3</button>
        </div>
      </div>
    </div>

    .panel{
      position: fixed;
      background-color: #685;
      top: 30px;
      height: 200px;
      display: flex;
      width: 100%;
    }
    .item{
      margin: 6px;
      border: 2px solid black;
      background-color: #553;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      box-shadow: 0 0 5px;
      max-width: 300px;
    }
    img {
      max-height: 100%;
      max-width: 100%;
      height: auto;
      width: auto;
      min-height: 0;
      min-width: 0;
    }

Answer 1

删除 align-items: flex-start; 并添加 object-fit: cover; object-position: top; 到img

Answer 2

删除这一行：

.items {
align-items: flex-start;
}

您正在做的是告诉 items 元素是将图像推送到其父容器列的开头。将宽度的其余部分留作空白。

要解决图像尺寸溢出其容器的问题，请为 .items div 设置最大高度：

.items{
  max-height: 95%;
}

然后将图像的高度设置为不会导致溢出：

img {
  max-height: 140px;
  object-fit: contain;
}