我有一些笔记本电脑和平板电脑的图像。在笔记本电脑上方有一个div,这个div应始终是笔记本电脑的宽度。这一切都很好,直到我将我的窗户缩小到更小的范围。
我想拥有,当我让我的屏幕更小或者我从一个移动设备上看它时它的尺寸正确。
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;
}
我如何才能提出正确的建议和建议?
答案 0 :(得分:0)
/* 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;
}
}
&#13;
<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>
&#13;