防止 flex 容器中的图像在 Edge 中拉伸

Question

我在 flex 中有一个图像在 Edge 浏览器中拉伸但在其他浏览器中正常。这是我的代码和 jsfiddle。打开 jsfiddle url in chrome 和 edge.. 我希望它看起来像 chrome in edge.

.logo {
  height: 100px;
  display: -webkit-flex;
  display: flex;
  -webkit-align-self: center;
  align-self: center;
  width: 200px;
  background: red;
}
.logo img {
  width: auto;
  height: auto;
  margin: auto;
  max-width: 100%;
}

<div class="logo">
  <img src="http://placehold.it/100x70">
</div>
<img src="http://placehold.it/100x70">

JSFIDDLE

Answer 1

而不是 align-self: center 使用 align-items: center.

.logo {
    height: 100px;
    display: flex;
    /* align-self: center; */
    align-items: center; /* new */
    width: 200px;
    background: red;
}

align-self 属性适用于弹性项目。除了你的 div.logo 元素不是弹性项目，因为它的父元素 - body，在这种情况下 - 没有应用 display: flex 或 display: inline-flex。因此，body 不是弹性容器，div 不是弹性项目，align-self 没有效果。

align-items 属性与 align-self 类似，只是它适用于 flex 容器。

但是，.logo img 已设置 margin: auto。这应该足以使图像在容器中垂直和水平居中。对于子项上的 margin: auto，应覆盖容器上的任何 align-items 或 justify-content 规则。

来自规范：

8.1. Aligning with auto margins

Prior to alignment via justify-content and align-self, any positive free space is distributed to auto margins in that dimension.

Note: If free space is distributed to auto margins, the alignment properties will have no effect in that dimension because the margins will have stolen all the free space left over after flexing.

大多数浏览器都遵循标准行为。 Edge（以及 IE10 和 11）不合规。

防止 flex 容器中的图像在 Edge 中拉伸

Prevent image in flex container from stretching in Edge

html

css

flexbox

microsoft-edge

JSFIDDLE