为什么在弹性框中使用 div 包装图像可以正确缩放它，但 img 项目无法缩放？

我想知道为什么将img flex 项目包装在 div s 中会导致它们正确缩放，但仅img项目却不能。

如果你查看这个JSFiddle，你会发现将图像包装在div中确实按照StackOverflow上其他帖子的建议工作，但它似乎不起作用。而且align-self并没有像这里建议的那样改变任何东西。我试图align-items，以便它会覆盖默认stretch但这不起作用。我还尝试清除min-height和min-width值，因为这些值默认设置为 auto .这个答案证明了使用 div 包装器的合理性，但它没有解释为什么它适用于 div flexbox 项目而不是直接用于img项目。

以下是一些 HTML：

 .stack {
      display:flex;
      max-width:600px;
      align-items:center;  /* this does not cause image tags to resize */
    }
    .stack img {
       min-height:0;
       min-width:0;
       height:auto;
       align-self:center;
    }
    .test img {
      width:100%;
    }

<div class="stack">
  <div class="test">
    <img src="https://placehold.it/200x200/E8117F/FFFFFF"/> 
    <!--Wrapping in a div works-->
  </div>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
</div>

为什么似乎是用div包裹图像的唯一解决方案？我不明白为什么正确缩放图像的唯一方法是通过div包装器。

使用 CSS flexbox，您需要直接从包装父元素寻址子元素。

在您的示例中，为了防止重复<div><img><div>结构，您只需删除<div class="test"></div> .

如果您需要将类（如示例中所示）应用于图像，则可以。

.stack {
  display: flex;
  max-width: 600px;
  align-items: center;
  border:1px solid gold;
}
.stack img {
  min-height: 0;
  min-width: 0;
  height: auto;
  width:200px;
  align-self: center;
}
.test img {
  width: 100%;
}
.test:nth-of-type(1) {
  border: 2px solid #000;
}

<body>
  <div class="stack">
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
    <img class="test" src="http://picsum.photos/200/200" />
  </div>
</body>

调整浏览器大小以查看其工作...

这能满足您的需求吗？

标记：

<body>
  <div class="stack">
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
      <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
    </div>
</body>

.CSS：

.stack {
  display:flex;
}
.stack img {
   align-self:center;
   width: 100px;
}

https://jsfiddle.net/zbac1dxe/6/

图像正在被拉伸，因为对齐自我的默认值是"拉伸"。要保持纵横比，请将对齐方式设置为"居中"。我已经更新了您的代码片段来演示这一点。

请记住，您有 5 张宽度为 200 像素的图像，容器宽度定义为 600 像素，因此以 200x200 正确显示图像会导致容器显示水平滚动条。

请参阅这个 StackOverflow 问题：为什么 flexbox 会拉伸我的图像？

 .stack {
      display:flex;
      max-width:600px;
    }
    .stack img {
        align-self: center;
    }

<div class="stack">
  <div class="test">
    <img src="https://placehold.it/200x200/E8117F/FFFFFF"/> 
    <!--Wrapping in a div works-->
  </div>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
  <img src="https://placehold.it/200x200/E8117F/FFFFFF"/>
</div>

相关内容

最新更新

热门标签：