Html 定义父级大小时img不考虑高度属性

我有一个列flex容器，其中一个flex子容器包含一个图像

<div class="flex">
  <p> Test </p>
  <div class="flex-item">
    <img class="img" src="https://i.imgur.com/E4Os1Fh.png">
  </div>
</div>

为什么图像不考虑高度属性，并且占用了比其父元素高度更多的空间

JSFiddle：

（您需要将窗口的大小调整为小于自然图像大小，才能看到实际问题）

---

EDIT：这个问题中的示例似乎运行良好，但在我的实际代码中不起作用。我在开发者工具中精简了代码，并上传了一个zip文件

如果您提取文件并打开

reproduct.html

，您将看到image元素在扩展时有一个滚动条，因为某些原因它超出了可用空间

---

---

一旦我解决了这个问题，我打算将

对象匹配：contain

添加到图像中，使其在可用空间内很好地包含内容。

您的CSS“.img”选择器应该是“img”

试试这个

<div class="flex">
  <div class="flex-item">
    <img src="https://i.imgur.com/E4Os1Fh.png">
  </div>
</div>

---

因为您使用的是flexbox

您的

.flex项目

将变成：

.flex项{
弹性：1；
}

实际上，您是在告诉flex项使用最大可用空间

---

您可以在上阅读有关flex属性的信息，您的

缺少该类。应该变成

@C\u ogo对不起，只是小提琴上的一个错误。我更新了问题，使其更像我的真实代码。在

上使用对象检查器，找出哪些（其他）样式应用于元素。是的，我已选中，没有其他样式。我在inspector中手动剥离了我的页面，并按CTRL+S。我将上载并添加问题的链接。谢谢，这解决了小提琴中的问题，但出于某种原因，在我的真实代码中（我正确地定位了图像）它仍然不起作用。@davidcalanan没有真正的代码，我就没什么用处了help@DavidCallanan请考虑将代码直接添加到问题中。我（我相信其他人也有同感）不喜欢从internet下载随机的zip文件。是的，对不起，我正试图在JSFIDLE上复制它，但无法做到。一旦可以，我会将代码添加到问题中。无论如何，谢谢你的帮助。如果你下载我的zip文件，我的代码中确实有

flex:1

。只是累了，问题打错了。

<div class="flex">
  <div class="flex-item">
    <img src="https://i.imgur.com/E4Os1Fh.png">
  </div>
</div>

html, body {
  height: 100%;
}

.flex {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}

.flex-item {
  width: 100%;
  height: 100%;
}

img {
  width: 100%;
  height: 100%;
}