带有图像的 Div 在移动设备上无法缩放

Question

致力于构建响应式网站，除了包含图像的 div 之外，我已经让所有 div 都适合移动设备。这些更大并产生悬垂。

图片显示了#welcome-pic 上的问题。#welcome-pic 这是在 book-pick div 中的图像上。 选书

@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%
} }

我将“col”类添加到每个包含图像的 div 中。我添加了接下来的两条规则，它们也应该适用于这些图像，以防特殊性成为问题。

这是网站：translatedokc.com 这是欢迎图片的 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" class="col">Welcome to OKC's Translated Fiction    Book Club!</h1>
                    <p class="textbox" class="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" class="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" id="faq-box" class="col">
                    <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>

Answer 1

以下 CSS 将使您的图像调整到其父元素的整个宽度：

.book-pick img,
#welcome-pic img,
.col img {
  width: 100%;
  max-width: 100;
  height: auto;
  object-fit: contain;
}

然后我从你当前的 CSS 中删除了它：

@media screen and (max-width: 650px) {
    #welcome-pic {
        width: 70%; 
        object-fit: contain; 
    }
}

简单演示