Html 图像被父div扭曲

我在一个div中有一个图像，我是html/css新手，该图像遵循它所在div的比例，即高度*宽度（100%*50%）。我意识到我可以通过调整图像的高度使其正确，但这似乎有点强制。Im使用显示flex标签。会是这样吗

html,body { height: 100%; margin: 0px; padding: 0px; }

#parent_div {
display: flex;
flex-direction: right;
height: 100%;
}

#child_div {
  display: flex;
  background-color: #F0A537;
  width: 50%;
  height: 100%;
}

#child_div2 {
  display: flex;
  background-color: #468966;
  width: 50%;
  height: 100%;
}

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

---

您已将图像设置为高度：20%。您需要将20%的高度更改为

auto

，这样图像将保持其自身的比例。然后以像素或百分比为单位设置宽度，使其适合您的div。

使用高度：auto；对于图像，它将成为屏幕的100%高度。就像那个div一样，它在里面