html - 更改视口(viewport)后元素彼此远离

Question

请有人帮我解决这个响应问题。更改视口(viewport)后，我的标题和主要元素彼此相去甚远。 jsfiddle

<header>
  <div class="slider">
    <img src="picture1" alt=""> 
   <img src="picture2" alt="" >
  </div>
</header>

<main>
  <h1>Hello Hello</h1>
</main>

CSS

 body{
      margin:0;
    }

.slider{
  height: 36em; 
  width:100%;
  position: relative;
  overflow: hidden;
}

.slider img{
  width:100%;
  height: auto;
  position: absolute;  
  top:0;
  left:0;
}

main{
  margin-top: 0.1em;
}

Answer 1

那是因为你设置了固定高度

.slider{
  height: 36em; // <-- HERE
  width:100%;
  position: relative;
  overflow: hidden;
}

所以当屏幕缩小时，图像也会缩小，并且 .slider 保持相同的高度

只需删除这个固定高度并将其更改为max-height，如果图像需要是绝对的，则需要使用javascript 手动计算幻灯片的高度

Jsfiddle

Javascript 与 jquery

$(document).ready(function(){
    $(window).resize();
});

$(window).resize(function(){
    var height = $('.slider img').height();
    $('.slider').height(height);
});

CSS

body{
  margin:0;
}

.slider{
  max-height: 36em; 
  width:100%;
  position: relative;
  overflow: hidden;
}

.slider img{
  width:100%;
  height: auto;
  position: absolute;  
  top:0;
  left:0;width:100%;
}

main{
  margin-top: 0.1em;
}

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <div class="slider">
    <img src="http://www.freewalkertours.com/rio/wp-content/uploads/sites/2/2017/04/o-que-fazer-no-rio-de-janeiro-cristo.jpg" alt=""> 
   <img src="https://mmoexaminer.com/wp-content/uploads/2017/10/sw352356.jpg" alt="" >
  </div>
</header>

<main>
  <h1>Hello Hello</h1>
</main>