Отзывчивый div в зависимости от ширины изображения - PullRequest
Новая
       27

Отзывчивый div в зависимости от ширины изображения

0 голосов
/ 08 мая 2018

У меня есть некоторые изображения ноутбука и планшета. Над ноутбуком есть div, этот div всегда должен быть шириной ноутбука. Все это хорошо видно, пока я не масштабирую свои окна до чего-то меньшего.

Мне бы хотелось, чтобы, когда я делаю свой экран меньше или когда я смотрю на него с подвижного устройства, которое правильно масштабируется.

Это то, что у меня есть, когда полная ширина: enter image description here

и когда я получаю доступ к ним на небольших устройствах, я получаю эту плохую вещь: enter image description here

Блок HTML: 

            <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/

1 Ответ

0 голосов
/ 08 мая 2018 

/* 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>
...