如何阻止我的div，从高度向下调整大小？

Question

我试图让.wrap DIV保持在.Section 3 DIV的高度之内。几个星期以来我一直很沮丧，我无法在任何地方找到这个问题的帮助。

.Section 3由＆＃34; Macbook / iPhone img＆＃34;组成。和＃34;小白位＆＃34;在它下面。 img的顶部与DIV的顶部完全一致。第3节＆＃39;。但是img基础并不与DIV .Section 3 Base一致。当窗口变宽时，img高度变长（向下）＆amp;最终重叠下一个DIV部分（黄色位）。

通常我会通过CSS放入img，但因为img是动画的，在Macbook和iPhone屏幕的屏幕上显示幻灯片。我只能通过HTML

获得它

继承守则：

＆＃13;

＆＃13;

.Section3{
  height: 500px !important;
}

.wrap {
  width: 100% !important;
  height: 500px !important;
  padding-top: 40%; /* ratio of image * 100 */
  overflow: hidden;
  position: relative;
}

.mockup {
  position: absolute ;
  top: -180px;
  overflow:hidden;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}

.mockup::after {
  content: '';
  position: absolute;
  background: rgba(209,157,84,0.09);
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.mockup__img {
  display: block;
  width: 1900px;
}

＆＃13;

<div id="Section3" class="Section3" role="main">
  <div id="wrap" class="wrap">
    <div class="mockup">
      <img class="mockup__img" src="I M A G E S/Portfolio Work/MacbookiPhone BG.jpg"/>
      <div class="mobile">
        <ul id="slideshow-1" class="slideshow">
          <li class="slideshow__item"><img src="I M A G E S/Portfolio Work/small/1.png"/></li>
          <li class="slideshow__item"><img src="I M A G E S/Portfolio Work/small/2.png"/></li>
          <li class="slideshow__item"><img src="I M A G E S/Portfolio Work/small/3.png"/></li>
          <li class="slideshow__item"><img src="I M A G E S/Portfolio Work/small/4.png"/></li>
        </ul>
      </div>
      <div class="screen">
        <ul id="slideshow-2" class="slideshow">
          <li class="slideshow__item current"><img src="I M A G E S/Portfolio Work/large/1.png"/></li>
          <li class="slideshow__item"><img src="I M A G E S/Portfolio Work/large/2.png"/></li>
          <li class="slideshow__item"><img src="I M A G E S/Portfolio Work/large/3.png"/></li>
          <li class="slideshow__item"><img src="I M A G E S/Portfolio Work/large/4.png"/></li>
        </ul>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;