Flex容器中图片尺寸调整问题：图片过大致页面溢出

我尝试在flex容器中放置3张并排显示的图片，但图片尺寸过大，导致页面被拉伸并出现滚动条。已尝试使用flex-wrap属性但未生效，是否只能通过Photoshop调整图片尺寸？

页面效果示意图：页面因图片尺寸过大出现横向滚动条，三张图片超出容器可视宽度范围。

现有代码 #

HTML代码 #

<section class="main-content">
        
    <div class="image">
        <img src="img/devil-ivy-can.jpg">
    </div>
    
    <div class="image">
        <img src="img/krimson-princess-can.jpg">
    </div>

    <div class="image">
        <img src="img/spiderwort-can.jpg">
    </div>

</section>

CSS代码 #

.main-content{
    display: flex;
}

div{
    width:100%;
    padding:10px;
    margin:10px;
}

不需要用Photoshop调整图片尺寸，通过CSS就能解决问题，核心是限制图片的自适应规则，同时修正flex子项的宽度设置：

• 修正flex子项宽度：不要给所有div设置width:100%，这会让每个子项单独占满容器宽度，既没法并排，也导致flex-wrap无法触发换行。改为给.image类设置flex:1，让三个子项平分容器的可用宽度。
• 限制图片自适应：给图片添加max-width:100%和height:auto，让图片自动适配父容器的宽度，同时保持原有比例，避免撑开容器。
• 优化间距（可选）：用flex容器的gap属性代替子项的margin，避免margin导致的宽度溢出问题。
• 可选：添加换行规则：如果希望在小屏幕上自动换行，给.main-content加上flex-wrap: wrap，同时给.image设置min-width来控制换行的临界点（比如min-width: 250px）。

修改后的CSS示例 #

.main-content{
    display: flex;
    /* 可选：小屏幕自动换行 */
    flex-wrap: wrap;
    /* 用gap替代margin，避免宽度溢出 */
    gap: 20px;
    padding: 10px;
}

.image{
    /* 让子项平分宽度 */
    flex: 1;
    /* 可选：设置最小宽度，控制换行时机 */
    min-width: 250px;
    padding: 10px;
}

.image img{
    /* 图片自适应父容器 */
    max-width: 100%;
    height: auto;
    /* 可选：让图片填充容器并保持比例裁剪 */
    /* object-fit: cover; */
}

内容的提问来源于stack exchange，提问作者RJ22