flex平分界面图片的坑

原始想法

原始想法，是做一个页面，铺满整个屏幕，平分两栏，就像下面这样的效果

问题现象

使用弹性布局实现了效果，测试的时候，左右两栏使用了同样的图片，代码是这样的

.container{
	display: flex;
    width: 100%;
    margin:0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.item1{
	flex:1;
}

img{
	width: 100%;
}

<div class="container">
	<img class="item1" src="./img/rumi.jpeg" alt="">
	<img class="item1" src="./img/rumi.jpeg" alt="">
</div>

用的图片是1200*1200的，结果发现没有平分，第一张图片完全展现，第二章被遮挡了

没有实现平分效果。怎么改宽高什么的都没有用。还以为自己对flex理解错了。然后我就用最简单的div测试了下。代码如下

.flex-container{
    width: 100%;
    height: 100px;
    border: 1px solid red;
    display: flex;
    justify-content: space-around;
    flex-wrap: nowrap;
}
.item{
    width: 100px;
    height: 100%;
    background-color: aqua;
    flex:1;
    border: 1px solid blue;
}

<div class="flex-container">
	<div class="item"></div>
	<div class="item"></div>
	<div class="item"></div>
</div>

效果如下

明明实现了均分。
突然灵机一动换了个测试图片，运气较好，新图片比较小，只有203*271发现神奇的平分了。

同样的代码，大图就实现不了平分，小图就实现了平分。
到这里，我就开始怀疑flex:1这个属性在img标签上没起作用，或者起到了错误的作用。所以我就在img外侧又包了一层div。测试代码如下：

.container{
    display: flex;
    width: 100%;
    margin:0 auto;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

.item1{
    flex:1;
}

img{
    width: 100%;
}

<div class="container">
    <!--rumi.jpeg-->
    <div class="item1">
        <img src="./img/rumi.jpeg" alt="">
    </div>
    <div class="item1">
        <img src="./img/rumi.jpeg" alt="">
    </div>
</div>

惊奇的发现，大图实现了平分效果了。

原因

网上搜了下，也问了下通义千问，给出了如下回答：

当你将 flex: 1 直接应用于<img> 元素时，实际上你是在设置该图片在其父级弹性容器内的增长比例。然而，图片本身是一个替换元素（replaced element），这意味着它的尺寸由其固有属性（例如文件中的宽度和高度）决定，而不是完全由CSS控制。因此，即使设置了 flex: 1，图片也不会像普通块级元素那样自动拉伸或收缩以填充可用空间

大意就是，img比较特殊，是个可替换元素，所以CSS不能完全控制它，需要用个其他标签包裹起来。
AI回答还给出了如下代码

<div class="flex-container">
  <div class="image-wrapper" style="flex: 1;">
    <img src="your-image.jpg" alt="Sample Image" style="width: 100%; height: auto;" />
  </div>
</div>

吐槽

Web前端开发学习过程真蛮苦逼的。HTML、CSS、JS、TS、各种框架。。。要学的东西多就算了，像CSS和JS之类的还是TMD有BUG的，各种BUG还得当特性给学了，否则一不小心就掉坑里。
自学更痛苦，一个简单的界面平分，还有各种坑。