含图片的Div在移动端无法自适应缩放问题求助

问题描述 #

搭建响应式网站时，除含图片的Div外其余元素均已适配移动端，但这类Div尺寸过大导致页面溢出，具体涉及#welcome-pic和book-pick容器内的图片。已为相关Div添加col类，并针对图片单独设置媒体查询样式，但问题仍未解决。

现有代码 #

媒体查询CSS

@media screen and (max-width:650px){
    .col{ 
        width:90%; 
        object-fit: contain;
    }

    .book-pick img{ 
        width: 70%; 
        object-fit: contain;
    }

    #welcome-pic{ 
        width:70%; 
        object-fit: contain; 
    }

.col2{ 
    width:100%
} }

欢迎图片HTML片段

<section>
    <div class="gen-container">
        <div class="col"><img src="images/welcome-pic.jpg" id="welcome-pic" alt="A book club meeting at Bookish"></div>
        <div class="box2">
            <h1 class="textbox col">Welcome to OKC's Translated Fiction Book Club!</h1>
            <p class="textbox col">We are an Oklahoma City-based book club that focuses on fiction in translation. Our meetings take place every 2nd Thursday at Bookish: Used Books & Art.</p>
            <p class="textbox col">
                Follow us on <a href="https://www.instagram.com/translatedokc/" target="_blank">Instagram</a><br>
                or join us on <a href="https://app.thestorygraph.com/book_clubs/e7f8bd89-3b60-42bd-b43d-d1ff59411abb" target="_blank">the Storygraph</a>
            </p>
         </div>
        <div class="textbox col" id="faq-box">
            <h4> Frequently Asked Questions</h4>
            <div>
                <p><b>When and where does book club take place?</b></p>
                <p>We meet every second Thursday at 7pm at Bookish in Oklahoma City.<br><i>1005 NW 36th Street</i><br>By Western, near Guestroom Records and Cock O' the Walk.</p>
                <p><b>Do I need to attend every meeting?</b></p>
                <p>Nope! Just come to any meeting. We don’t keep attendance. We appreciate your participation and your company, whether you only join us once or become a frequent member.</p>
                <p><b>What if I don’t finish the book?</b></p>
                <p>You’re welcome to join us whether you’ve finished our book pick or not, as long as you’re OK with spoilers being discussed.</p>
                <p><b>Do I need to buy the books from Bookish?</b></p>
                <p>You can join us no matter how you acquire the book.</p>
            </div>
        </div>
    </div>
</section>

解决方案 #

问题核心在于图片未被限制在父容器范围内，且容器未处理盒模型导致的潜在溢出。修改媒体查询CSS如下：

@media screen and (max-width:650px){
    .col{ 
        width:90%; 
        box-sizing: border-box; /* 确保padding、border不会额外增加容器宽度 */
        margin: 0 auto; /* 可选：让容器水平居中 */
    }

    .book-pick img, #welcome-pic{ 
        width: 100%; /* 图片占满父容器宽度 */
        max-width: 100%; /* 强制图片不超出父容器边界 */
        height: auto; /* 保持图片原始比例，避免变形 */
        object-fit: contain; /* 按需保留，确保图片完整显示 */
    }

    .col2{ 
        width:100%;
        box-sizing: border-box;
    } 
}

额外优化提示 #

• HTML中存在重复class属性（如<h1 class="textbox" class="col">），需合并为<h1 class="textbox col">，避免无效代码。
• 若仍存在横向溢出，检查.gen-container等上层容器是否设置overflow-x: hidden，防止页面出现横向滚动条。

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