Question

我有一个网页，该网页使用两个图像作为生物板块。在较大和中等尺寸的屏幕尺寸上，它会重新调整大小并弯曲，但在很小的尺寸上，文本和每个图像的一半会从屏幕上流出。我发现我正在使用的第二张图像会导致此问题，但是我不知道正确修复此错误的正确方法。

更新：出于上下文的考虑，第二张狗图像由于某种原因使文本偏向屏幕。没有该图像，页面将无法正常工作。

What it looks like on small screen sizes

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>

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

2 个答案: