响应式图像导致文本和图像在小屏幕尺寸下溢出屏幕

Question

我有一个网页，其生物部分使用两张图片。在较大和中等尺寸的屏幕上，它可以很好地重新调整大小和弯曲，但在非常小的尺寸上，文本和每个图像的一半会从屏幕上流出。我发现我使用的第二张图片导致了这个问题，但我不知道正确修复这个错误的正确方法。

更新：就上下文而言，第二张狗图像由于某种原因使文本偏离屏幕。如果没有该图像，页面将按预期运行。

What it looks like on small screen sizes

Tablet size screen

What it looks like on small screen sizes WITHOUT second image

包含这些图像的 HTML 部分代码：

<!-- About Section -->
    <div class="main" id="about">
      <div class="main__container">
        <div class="main__img--container">
          <div class="main__img--card-bio"></div>
          <div class="main__img--card-bio"></div>
        </div>

CSS部分：

.main__img--card-bio {
  margin: 10px;
  height: 350px;
  width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url("/images/bio-image2.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

.main__img--card-bio:nth-child(2) {
  margin: 10px;
  height: 350px;
  width: 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background-image: url("/images/kewl.jpg");
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

@media screen and (max-width: 480px) {
.main__img--card-bio {
    margin: 10px;
    height: 100px;
    width: 100px;
    overflow: hidden;
  }

  .main__img--card-bio:nth-child(2) {
    margin: 10px;
    width: 100px;
    height: 100px;
    overflow: hidden;
  }
}

Answer 1

缩小以接受宽度为 2 的图像

Answer 2

我认为将您的 div 背景图片重组为 img 标签并添加 flex-wrap: wrap 会更好。这样做的原因是当有一个父项 div 有多个项目时，flexbox 工作得更好（至少对我而言）。 flex-wrap: wrap 允许使用更具响应性的图像，因此当您将网站的宽度调整为更小的宽度时，项目将移至下一个。尝试在整页中调整屏幕大小。您将能够看到 flex-wrap: wrap 的实际效果！

.main__img--container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.main__img--card-bio {
  margin: 10px;
  height: 350px;
  width: 350px;  
  background-size: cover;
  background-position: center;
  border-radius: 50%;
}

.lorem {
  width: 50%;
  margin: 0 auto;
}

<body>
 <!-- About Section -->
<div class="main" id="about">
  <div class="main__container">
    <div class="main__img--container">
      <img class="main__img--card-bio" src="https://cdn.onlinewebfonts.com/svg/img_87237.png" alt="bio-pic"> 
      <img class="main__img--card-bio" src="https://cdn.onlinewebfonts.com/svg/img_87237.png" alt="bio-pic"> 
    </div>
    <div class="lorem">
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur
    </div>
  </div> 
</div>
</body>

响应式图像导致文本和图像在小屏幕尺寸下溢出屏幕

Responsive images causing text and images to overflow out of the screen on small screen size

html

css

user-interface

user-experience