Question

请帮助我解决这个响应问题。更改视口后，我的标题和主要元素彼此相距很远。 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

使用jquery

Javascript

$(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>

更改视口后相互远离的元素

1 个答案: