Question

我想知道为什么在img中包装div个弹性项目会导致它们正确缩放，而仅img个项目却不能。

如果您检出this JSFiddle，您会发现将图像包装在div中确实可以如StackOverflow上其他文章所建议的那样工作，但似乎无法正常工作。而且align-self并没有像建议的here一样进行任何更改。我尝试align-items，以便它会覆盖默认的stretch，但这不起作用。我还尝试清除min-height和min-width的值，因为它们默认情况下设置为auto。 This答案使用div包装器是有道理的，只是它不能解释为什么为什么适用于div弹性盒项目，而不直接适用于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包装器。

Answer 1

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

调整浏览器大小以使其正常运行...

Answer 2

这是您需要的吗？

标记：

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

Answer 3

图像被拉伸，因为align-self的默认值为'stretch'。要保持宽高比，请将align-self设置为'center'。我已经更新了您的代码段以演示这一点。

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

请参阅以下StackOverflow问题：Why does flexbox stretch my image?

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

为什么在divbox中用div包裹图像可以正确缩放它，而img项目却不能缩放？

3 个答案: