html - 获取并排的两个图像，以随着页面大小的调整而减少和增加

Question

我有两个并排放置的 div，其中包含图像。当网页的大小与我的 Macbook 13 英寸屏幕一样大时，照片可以完美地并排放置。然而，当我开始增加屏幕宽度时，照片开始散开，在两者之间留下巨大的差距。

即使浏览器页面增加或减少，如何让两张照片并排显示？ `

.pic {
  max-width: 100%;
}

#pic2 {
  max-width: 100%;
}

.photosection {
  background-color: black;
  max-width:1400;
  height:363px;
}

#photosection1 {
  float:left;
  max-width: 110vw;
}

#photosection2 {
  max-width:50%;
  float:right;
}

<div class="photosection">
  <div id="photosection1">
    <a  href="#" class="">
      <span class="text">
        Treat Yourself
        Intuitive Language Coaching
        (Intuitive Life-Coaching + Communication Training)
      </span>
      <img class="pic" src="images/oneonone.jpg" alt="inspiremug">
    </a> 
  </div>

  <div id="photosection2">
    <a  href="" class="">
      <span class="text">
        Treat Your Group, Business or Organization
        I'll bring the sweets!
      </span>
      <img id="pic2" src="images/groupsession.jpg" alt="necklace">
    </a> 
  </div>
</div>

Answer 1

#photosection1 {
    width: 50%;
    float: left
}

#photosection2 {
    width: 50%;
    float: right
}

将 width="100%"添加到您的图片标签

<img class="pic" src="images/oneonone.jpg" alt="inspiremug" width="100%">
<img id="pic2" src="images/groupsession.jpg" alt="necklace" width="100%">