Question

我的项目中有一个类似的案例：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .wrapper {
      display: flex;
      width: 600px;
      height: 300px;
    }

    .container {
      display: flex;
      width: 100%;
    }

    img {
      height: 100%;
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="container">
      <div class="image-wrapper">
        <img src="https://placehold.co/200x600">
      </div>
      <h2>text</h2>
    </div>
    <div>
      test
    </div>
  </div>
</body>
</html>

我有一个固定宽度的容器（.container），该容器将其子代的高度设置为与其自身的高度相匹配（默认情况下，由于align-items: stretch;导致）。在其中一个容器中，我有一个图像（<img>）要与父图像（.image-wrapper）保持相同的高度，同时保持比例。在演示中，发生了这种情况，但是.image-wrapper的宽度未更新。至少不总是...

有时，图像显示如下（不正确）：

...有时，它看起来像这样（正确）：

我认为这与浏览器不更新.image-wrapper的宽度有关。在错误的情况下，其宽度为200（占位符图像的原始大小），但是在将图像调整为100x300后（由于其height: 100%且其父级为300px而自然尺寸为200x600），则父级的宽度不会更新以反映这一点。它应该从200更改为100，即图像的调整大小值。

奇怪的是，如果大小不正确，并且在检查器中将width: 100%添加到.image-wrapper，然后将其删除，则会刷新其宽度，现在可以正确显示。

如果下载该代码段并在浏览器中将其打开，则应该看到该图像显示不正确，直到打开DevTools并禁用缓存。之后（由于我猜图像需要花费一些时间才能加载），因此刷新后宽度设置正确。

这发生在Windows 10上最新的Chrome，Firefox和IE11上。这也是fiddle。

为什么会这样？如何解决？

Answer 1

当您未明确指定图像大小时，可能会发生这种情况；值得注意的是，这是known bug in Chrome。

您可以：

在HTML width属性或CSS width属性中指定：

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
    .wrapper {
      display: flex;
      width: 600px;
      height: 300px;
    }

    .container {
      display: flex;
      width: 100%;
    }

    img {
      height: 100%;
      width: 100px; /* 1st solution: you should use fixed width when using CSS */
    }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="container">
      <div class="image-wrapper">
        <img src="https://placehold.co/200x600" width="100"> <!-- 2nd solution -->
      </div>
      <h2>text</h2>
    </div>
    <div>
      test
    </div>
  </div>
</body>
</html>

使用JavaScript在运行时将HTML width属性设置为实际图像大小：

// Give your image a proper ID
window.addEventListener('load', function () {
  var img = document.getElementById('img');

  // This sets the image's HTML width element
  // Notice the self-assignment
  img.width = img.width;
})

.wrapper {
  display: flex;
  width: 600px;
  height: 300px;
}

.container {
  display: flex;
  width: 100%;
}

img {
  height: 100%;
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div class="wrapper">
    <div class="container">
      <div class="image-wrapper">
        <img src="https://placehold.co/200x600" id='img' />
      </div>
      <h2>text</h2>
    </div>
    <div>
      test
    </div>
  </div>
</body>
</html>

Answer 2

按原样，这显然是Chrome中的一个已知错误，但令我感到困惑的是，我也在Firefox中遇到了这个问题...

有2种解决方案：

1）

img{
  height: 100%;
  width: 100px; /* Set a specific width to your image */
}

2）显然删除image-wrapper div也可以立即解决此问题。

.wrapper {
  display: flex; 
  flex-flow: row nowrap;
  flex-basis: 600px;
  height: 600px;
}

.container {
  display: flex;
  height: 300px;
}

img {
 height: 100%;
}

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div class="wrapper">
    <div class="container">
         <img src="https://placehold.co/200x600">
         <h2>text</h2>
    </div>
    <div>
      test
    </div>
  </div>
</body>
</html>

带有图片的flex子尺寸不正确

2 个答案: