Html flexbox中的图像自动拉伸

我想知道为什么我放在这个带有display flex的div容器中的任何图像都会自动拉伸？如果我要为它设置一个宽度，我不能将它与内容对齐

容器{ 显示器：flex； 证明内容：中心； } 货柜组{ 填充：25px； 背景：蓝色； 颜色：白色； 宽度：500px； 显示器：flex； 弯曲方向：立柱； } 货柜组h1{ 显示器：flex； 证明内容：中心； } 容器输入， 容器按钮{ 宽度：75%； } 集装箱img{ 显示器：flex； 证明内容：中心； } A. A.

---

flex容器的初始设置为。这意味着flex项将扩展容器的整个长度。这将是容器在flex-direction:row上的高度，以及flex-direction:column上的宽度

由于使用的是列方向flex容器，因此默认情况下图像是水平拉伸的。可以使用其他值替代此设置。尝试对齐项目：柔性起点或中心

容器{ 显示器：flex； 证明内容：中心； } 货柜组{ 显示器：flex； 弯曲方向：立柱； 对齐项目：居中；/*新建*/ 宽度：500px； 填充：25px； 背景：蓝色； 颜色：白色； } 货柜组h1{ 显示器：flex； 证明内容：中心； } 容器输入， 容器按钮{ 宽度：75%； } 集装箱img{ 显示器：flex； 证明内容：中心； } A. A.

---

除了@Michael_B的答案外，您的代码可以简化如下，因为您不需要所有这些flexbox属性

货柜组{ 填充：25px； 背景：蓝色； 颜色：白色； 宽度：500px； 保证金：自动； 显示器：flex； 弯曲方向：立柱； 对齐项目：居中； } 容器输入， 容器按钮{ 宽度：75%； } A. A.

---

重要的一点是，他不能使用justify content来对齐它：center；在图像本身上[他也不能使其成为flex容器]