html - 防止两个 div 重叠？

Question

当我扩大浏览器的大小时，我的图像 div 和 iframe div 在某些点上保持重叠。

我尝试将它们都设为静态并将它们放在同一个容器中 (bootstrap 4)，但仍然一无所获，有什么想法吗？

https://codepen.io/Modestas/pen/LjvQVb

body {
  background: #191a1c;
  background: url("http://silviahartmann.com/background-tile-art/images/black_grundge_seamless_tile1.jpg");
  background-position: center center;
  margin-top: 10px;
}

.top {
  text-align: center;
  color: white;
  width: 50%;
  margin: auto;
  position: relative;
}

h4 {
  font-style: italic;
  font-family: serif;
}

.jumbotron1 {
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center;
  color: rgba(256, 256, 256, 0.7);
  font-family: serif;
  border-radius: 5px;
  top: 2.6vw;
  */ margin: 0 auto;
  margin-bottom: 15px;
  padding: 7px;
  position: relative;
}

img {
  height: 50vw;
  width: 40vw;
  opacity: 0.6;
  border-radius: 5px;
  margin-bottom: 2.7rem;
  margin-right: 4rem;
  margin-top: 5%;
  left: -1.5rem;
  right: 0px;
}

iframe {
  opacity: 0.5;
  border-radius: 5px;
  height: 50vw;
  width: 20rem;
  margin-top: 5%;
  margin-left: 5%;
  right: 6vw;
}

#jumbo2 {
  color: rgba(256, 256, 256, 0.7);
  width: 53vw;
  height: 100%;
  font-family: serif;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  position: relative;
}

#jumbo2 p {
  /* font-size: 1.5vw; */
  text-align: center;
}

#italic {
  font-style: italic;
  /*   font-size: 1.5vw; */
}

#date {
  font-style: italic;
  margin-left: 5vw;
  margin-bottom: 20px;
  /*   background-color: rgba(10,10,10,0.5); */
  margin: 0 auto;
  text-align: center;
  border-radius: 5px;
  color: rgba(256, 256, 256, 0.7);
}

#wiki {
  margin-top: px;
  background-color: rgba(10, 10, 10, 0.5);
  padding: 5px;
  width: 10%;
  text-align: center;
  color: white;
  border-radius: 5px;
  /*   bottom: 30px; */
  margin: 0 auto;
}

<div class="container">
  <div class="container">
    <div class="row">
      <div class="top col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
        <h1>Zyzz</h1>
        <h4>~ The Legacy</h4>
      </div>
    </div>
  </div>


  <div class="container">
    <div class="row">
      <div class="jumbotron jumbotron1 col-12 col-sm-12  col-md-12 col-lg-12 col-xl-12">
        <p id="italic">"Everybody one day, will die and be forgotten. Find a passion, form relationships; don't be afraid to get out there and fuck what everyone else thinks"
        </p>
      </div>
    </div>
  </div>


  <div class="container">
    <div class="row">
      <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
        <img src="https://s-media-cache-ak0.pinimg.com/564x/0b/70/49/0b704937424f40df354456c91219d0a1.jpg">
      </div>
      <div class="col-6 col-sm-6 col-md-6 col-lg-6 col-xl-6">
        <iframe width="210" height="250" src="https://www.youtube.com/embed/16uDoya2rfQ">
       </iframe>
      </div>
    </div>
  </div>




  <div class="container">
    <div class="row justify-content-center">
      <div class="jumbotron col-12 col-12-sm col-12-md col-12-lg col-12-xl" id="jumbo2">
        <p>Aziz Sergeyevich Shavershian AKA "Zyzz" was Born on 24th March 1989.</p>
        <p>Zyzz used to be a skinny kid before being inspired to start working out by his bodybuilding brother. From there on his life changed dramatically. His commitment to pushing the physical limits of his body, eating a strict and regulated diet and
          getting the right amount of sleep began to manifest and produce amazing results. It was not long before Zyzz had transformed into a greek god who not only looked great but also radiated confidence and charisma.</p>
        <p> His "IDGAF" attitude and his relentless commitment to self-improvement and fitness has inspired many people to hit the gym, live a care-free life and ultimately change their entire lives around and encourage them to reach their full potential.</p>
        <p> Unfortunately, Zyzz passed away on august 5th 2011, after suffering from a heartattack in a sauna whilst on holiday in Pattaya, Thailand. His cause of death is not fully known but his mother has stated that zyzz has had a history of high blood
          pressure and dizziness. Some however, speculate that his death was caused by an abuse of stimulants and anabolic steroids. Nevertheless, Zyzz's death remains to be a controversial topic.</p>
        <p> Despite his untimely demise, Zyzz has created a legacy and continues to live on through the many people who he has inspired to better themselves, have fun and make the most of their lives.</p>
      </div>
    </div>
  </div>

  <div class="container">
    <div class="row ">
      <div id="date" class="col-10 col-10-sm col-10-md col-10-lg col-10-xl">
        <p>R.I.P, 24 March 1989 – 5 August 2011</p>
      </div>
      <div class="col-10 col-10-sm col-10-md col-10-lg col-10-xl" id="wiki">
        <p>For more information pertaining to Zyzz and his legacy, I invite you to read more
          <a href="https://en.wikipedia.org/wiki/Aziz_Shavershian">here</a>.
        </p>
      </div>
    </div>
  </div>

Answer 1

在图像标签 CSS 中，您必须使用 max-width 而不要为图像使用高度。

你可以用这个替换我们的代码。

img {
 height: auto;
 width: 40vw;
 max-width:100%;
 opacity: 0.6;
 border-radius: 5px;
 margin-bottom: 2.7rem;
 margin-right: 4rem;
 margin-top: 5%;
 left: -1.5rem;
 right: 0px;
}