CSS 定位 - 内容与图像重叠

Question

下面是 HTML 和 CSS。内容与图像保持重叠。最终目标是让它具有响应能力。它曾经有效，但突然间我无法解决它。使用人工智能，使用在线资源，我似乎无法修复它。如果有帮助的话我可以发布完整的代码。这些只是似乎受到影响的特定部分。

<section id="bio">
        <div class="container">
            <div class="bio-box">
                <div class="bio-image">
                    <img src="img/jacob-kern.jpg" alt="Jacob Kern">
                </div>
                <div class="bio-content">
                    <h3>Jacob Kern</h3>
                    <h3>CEO | Founder</h3>
                    <h3>RZR Solutions</h3>
                    <h3>Faith Based Leadership</h3>
                    <blockquote>
                        <strong>"At RZR Solutions, our values are deeply rooted in our faith. As a veteran, we are always committed to doing the right thing, guided by integrity and a strong ethical foundation. This dedication ensures we provide honest, reliable, and trustworthy services to our clients."</strong>
                    </blockquote>
                </div>
            </div>
        </div>
    </section>

这是CSS

/* Bio section styling */
#bio .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    padding: 20px;
    box-sizing: border-box;
}

.bio-box {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: #f9f9f9; /* Match the background color of feature boxes */
    padding: 20px; /* Add padding to match feature boxes */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Add shadow to match feature boxes */
    margin: 50px 0;
    border-left: 5px solid var(--secondary-color); /* Full-length border */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    box-sizing: border-box;
}

.bio-image {
    flex: 0 0 auto;
    width: 200px;
    height: auto;
    margin-right: 20px;
}

.bio-content {
    flex: 1;
    padding: 20px;
    border-left: 3px solid var(--primary-color);
    color: #555;
    box-sizing: border-box;
    word-break: break-word;
}

.bio-content h3 {
    margin: 0;
    color: var(--dark-font-color);
}

.bio-content blockquote {
    margin-top: 10px;
    font-style: italic;
    color: #555;
}

Answer 1

您希望 .bio-image 中包含的图像具有正确的大小。您应该定义 img 的大小，如下所示：

.bio-image img{
  width:100%;
  height:auto;
}

https://jsfiddle.net/uof1tp6d/