css - 基于图像宽度的响应式 div

Question

我有一些笔记本电脑和平板电脑的图片。在笔记本电脑上方有一个 div，这个 div 应该始终是笔记本电脑的宽度。一切都很好，直到我将窗口缩小到更小的范围。

我希望，当我缩小我的屏幕或当我从移动设备上查看它时，它能正确缩放。

这是全宽时我所拥有的:

当我在较小的设备上访问它时，我遇到了一件坏事:

HTML block :

            <div class="col-lg-6">
            <div class="rain">
                 /* raindrops here */
            </div>

            {{-- RAIN DROPS(IMAGES) --}}
            <div class="parent">
                <img src="{{ url('img/header/laptop.svg') }}" class="laptop">
                <img src="{{ url('img/header/tablet.svg') }}" class="tablet">
            </div>

        </div>

CSS:

    .rain {
    position: relative;
    width: 536px;
    height: 329px;
    opacity: 0.52;
    background-image: linear-gradient(to bottom, rgba(107, 233, 228, 0), #6be9e4);
    left: 120px;
    top: -60px;
}

    .parent {
        position: relative;
        top: 50;
        left: 0;
    }
    .laptop {
        position: absolute;
        left: -45px;
        top: -145px;
    }
    .tablet {
        position: absolute;
        left: -45px;
        top: 15px;
    }

我怎样才能使这个正确，提示，建议？

https://jsfiddle.net/fa8711au/1/

Answer 1

/* Main rectangle */

.rain {
  position: relative;
  width: 536px;
  height: 329px;
  opacity: 0.52;
  background-image: linear-gradient(to bottom, rgba(107, 233, 228, 0), #6be9e4);
  left: 120px;
  top: -60px;
}

header {
  background-image: linear-gradient(91deg, #7602f0, #00c7ff);
  min-height: 610px;
}

.parent {
  position: relative;
  top: 50;
  left: 0;
}

.laptop {
  position: absolute;
  left: -45px;
  top: -145px;
}

.tablet {
  position: absolute;
  left: -45px;
  top: 15px;
}



@media screen and (max-width:767px)
{
  .rain
  {
    width:100%;
    left:0px;
  }
  .laptop
  {
    max-width:100%;
  }
  .tablet
  {
    max-width:50%;
  }
  .parent
  {
    max-width:320px;
  }
  .tablet
  {
   top: -70px; 
  }
  
}

<header>
  <div class="col-lg-6">
    <div class="rain">
      <div class="Oval Orval-Main color-1"></div>
      <div class="Oval-Copy Orval-Main color-1"></div>
      <div class="Oval-2 Orval-Main color-2"></div>
      <div class="Oval-3 Orval-Main color-1"></div>
      <div class="Oval-4 Orval-Main color-1"></div>
      <div class="Oval-5 Orval-Main color-1"></div>
      <div class="Oval-6 Orval-Main color-2"></div>
      <div class="Oval-7 Orval-Main color-7"></div>
      <div class="Oval-8 Orval-Main color-1"></div>
      <div class="Oval-9 Orval-Main color-9"></div>

      <div class="Rectangle Rectangle-main"></div>
      <div class="Rectangle-Copy Rectangle-main"></div>
      <div class="Rectangle-2 Rectangle-main"></div>
      <div class="Rectangle-3 Rectangle-main"></div>
      <div class="Rectangle-4 Rectangle-main"></div>
      <div class="Rectangle-5 Rectangle-main"></div>
      <div class="Rectangle-6 Rectangle-main"></div>
      <div class="Rectangle-8 Rectangle-main"></div>
      <div class="Rectangle-9 Rectangle-main"></div>
      <div class="Rectangle-10 Rectangle-main"></div>
      <div class="Rectangle-11 Rectangle-main"></div>
    </div>


    <div class="parent">
      <img src="https://image.ibb.co/kAKVOn/laptop.png" class="laptop">
      <img src="https://image.ibb.co/iyOqOn/tablet.png" class="tablet">
    </div>

  </div>
</header>