Question

我在将<img>设置为flex父代内部灵活时遇到问题。图像开始超出父级尺寸。我想让父母离开display: flex;，并限制图片越过父母的尺寸。

.full
{
  width: 400px;
  height: 200px;
  background-color: blue;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.half
{
  width: 50%;
  background-color: red;
  padding: 20px;
}
img
{
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
}

<div class="full">
  <div class="half">
          <h1>title</h1>
          <img src="http://placehold.it/90x200">
  </div>
</div>

您能否解释一下并提供一些有用的链接，这些链接可以解释所显示的行为及其可能的解决方案？

我同时使用Firefox和Chrome浏览器进行查看。在两个浏览器中问题仍然存在。

问题似乎与this question重复

Answer 1

要使其正常工作，.half div也必须是flexbox容器，并且图像必须具有min-height: 0，如here所述。

.full
{
  width: 400px;
  height: 200px;
  background-color: blue;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.half
{
  width: 50%;
  background-color: red;
  padding: 20px;
  display: flex;
  flex-flow: column nowrap;
  justify-content: flex-start;
}
img
{
  min-height: 0;
  max-width: 100%;
  max-height: 100%;
}

<div class="full">
  <div class="half">
    <h1>title</h1>
    <img src="http://placehold.it/90x200">
  </div>
</div>

图像超出弹性父级尺寸

1 个答案: