图片不遵守父元素的flex尺寸

1. 设置img元素的max-width和max-height属性为100%。

示例代码：

.wrapper { display: flex; justify-content: center; align-items: center; }

.wrapper img { max-width: 100%; max-height: 100%; }

<div class="wrapper"> <img src="example.jpg" alt="example"> </div>

2. 将img元素放置在一个div容器中，在该div容器上应用flex属性。

示例代码：

.wrapper { display: flex; justify-content: center; align-items: center; }

.wrapper .image-container { flex: 1; display: flex; justify-content: center; align-items: center; }

.wrapper .image-container img { max-width: 100%; max-height: 100%; }

<div class="wrapper"> <div class="image-container"> <img src="example.jpg" alt="example"> </div> </div>