浏览器窗口缩放时HTML/CSS区块内容无法完整显示求助

问题根源 #

1. 图片标签硬编码了固定宽高，无法随容器尺寸变化自适应
2. .item-img容器仅设置宽度百分比，但未对内部图片做自适应约束
3. 小窗口下flex布局的水平排列导致图片容器空间不足，图片被截断

修复代码 #

修改CSS：

.whoweare{
    padding:80px 0px 50px;
    background-color: #000000;
}

.whoweare .content {
    display: flex;
}

.whoweare .content .box{
    padding:5px;
    flex:0 0 100%;
    max-width: 100%;
}

.whoweare .content .item-img {
    width: 50%;
    transform: rotateY(180deg);
    padding: 30px;
    /* 新增：让图片在容器内居中并约束尺寸 */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 新增：图片自适应规则 */
.whoweare .content .item-img img {
    max-width: 100%;
    height: auto;
}

.whoweare  .content .item-text h2{
    font-size: 50px;
    font-weight: 500;
    margin:20px;
    color: #ffffff;
    padding: 0px 0px 20px;
}

.whoweare .content .item-text p{
    font-size: 20px;
    line-height:50px;
    color:#ffffff;
    margin:20px;
    padding:0px 0px 20px;
    font-family: 'Open Sans', sans-serif;
}

.whoweare  .content .class-items .item{
    margin-bottom: 30px;
    display: flex;
}

.whoweare  .content .class-items .item .item-text{
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 新增：小屏幕适配 */
@media (max-width: 768px) {
    .whoweare .content .class-items .item {
        flex-direction: column;
    }
    .whoweare .content .item-img {
        width: 100%;
        padding: 15px;
    }
    .whoweare .content .item-text h2 {
        font-size: 32px;
    }
}

修改HTML（移除图片固定宽高+修正标签拼写错误）：

<section class="whoweare" id="whoweare">
    <div class="container">
        <div class="content">
            <div class="box text wow slideInRight">
                <div class="class-items">
                    <div class="item wow bounceInUp">
                        <div class="item-img">
                            <img src="images/ACD68359-D3EB-4302-99C0-E59A663380AB.jpeg" alt="classes" />
                        </div>
                        <div class="item-text">
                            <h2>Who we are</h2>
                            <p>Our gym provides a unique experience </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

修复说明 #

• 给.item-img添加display:flex和overflow:hidden，确保图片在容器内居中且不会超出容器边界
• 图片设置max-width:100%和height:auto，让图片按原始比例自适应容器宽度，避免被截断
• 媒体查询在小屏幕下将水平flex改为垂直排列，同时调整标题字号，优化移动端显示
• 修正了HTML中<dic>的拼写错误，避免布局异常

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