Css 在flex box中保持图像纵横比

所以我想让文本靠近图像，并且都居中。Flexbox似乎可以很好地解决这个问题，但图像不断被压扁。有没有办法让图像保持原来的纵横比

.container{
显示器：flex；
宽度：60%；
保证金：0自动；
边框：红色1px实心；
}
img{
高度：300px；
宽度：300px；
}
p{
填充：30px；
}

Lorem Pisum Doelem sipsum Illup getsup in da Tubsub

像这样吗

像这样

---

您需要将图像放入另一个容器中，以便其内部尺寸不会受到影响

.container{
对齐项目：居中；
显示器：flex；
宽度：60%；
保证金：0自动；
边框：红色1px实心；
}
.形象{
弹性：1；
最大宽度：50%；
最小宽度：50%；
}
img{
宽度：100%；
高度：自动；
显示：块；
}
p{
填充：30px；
弹性：1；
}

Lorem Pisum Doelem sipsum Illup getsup in da Tubsub

您需要将图像放入另一个容器中，以使其内部尺寸不受影响

.container{
对齐项目：居中；
显示器：flex；
宽度：60%；
保证金：0自动；
边框：红色1px实心；
}
.形象{
弹性：1；
最大宽度：50%；
最小宽度：50%；
}
img{
宽度：100%；
高度：自动；
显示：块；
}
p{
填充：30px；
弹性：1；
}

Lorem Pisum Doelem sipsum Illup getsup in da Tubsub

似乎会在这里帮助您。。。还要注意的是，总是最好将

img

包装在一个div中…似乎会对您有所帮助。。。还请注意，始终最好将

img

包装在一个div中。。。

.container {
display: flex;
width: 100%;
margin: 0 auto;
border: red 1px solid;
}

img{
max-height: 300px;
width: 100%;
overflow:hidden;

}

p{
 padding: 30px;
}