Question

我正在开发一个严重依赖背景图片和可扩展内容的网站。但是，每当扩展内容时，背景图像也会调整大小。这是预期的行为，但我该怎样做才能阻止它呢？

在扩展之前，

div.content的高度设置为0。 div.wrap的背景图片的大小设置为cover。单击“阅读更多”以展开内容。由于展开的内容超出了包装器的原始高度，因此父级（div.wrap）高度也会发生变化，从而导致背景图像调整大小。

HTML：

<div class="wrap">      
    <h1>Title</h1>
    <div class="content">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      <br>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
    <p class="readmore">
      read more
    </p>      
</div>

CSS：

div.wrap {
  position: relative;
  background: url(https://images.unsplash.com/photo-1515524738708-327f6b0037a7?ixlib=rb-0.3.5&s=cb89fbf71ae49b0a22e3e35e6d856a17&auto=format&fit=crop&w=1350&q=80);
  background-size: cover;
  background-repeat:no-repeat;
  background-position:center;
  padding: 30px;
  color: #fff;
}

div.content {
  overflow: hidden;
  max-height: 0;
  transition: all .3s ease-in-out;
}

div.content.show {
  max-height: 500px;
}

jQuery：

$(function(){
  $('p.readmore').click(function(){
    $('div.content').toggleClass('show');
  });
});

为div.wrap设置固定高度不是一种选择，内容量会有所不同。将div.content的位置设置为absolute会停止父级调整大小并稍微解决问题。但是，这些内容将重叠在任何导致UI混乱和混乱的任何次要元素上 - 用户需要再次折叠展开的内容才能查看下一个div.wrap。

Answer 1

您可以在伪元素中使用背景，并按照自己的意愿修复其高度：

$(function() {
  $('p.readmore').click(function() {
    $('div.content').toggleClass('show');
  });
});

body {
 background-color:pink;
}

div.wrap {
  position: relative;
  
  padding: 30px;
  color: #fff;
}
div.wrap:before {
  content:"";
  position:absolute;
  right:0;
  left:0;
  top:0;
  height:200px;
  background: url(https://images.unsplash.com/photo-1515524738708-327f6b0037a7?ixlib=rb-0.3.5&s=cb89fbf71ae49b0a22e3e35e6d856a17&auto=format&fit=crop&w=1350&q=80);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index:-1;
}
div.content {
  overflow: hidden;
  max-height: 0;
  transition: all .3s ease-in-out;
}

div.content.show {
  max-height: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <h1>Title</h1>
  <div class="content">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
    <br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
  </div>
  <p class="readmore">
    read more
  </p>
</div>

CSS - 防止内容扩展时背景图像调整大小？

1 个答案: