Question

当我设置固定宽度和宽度时，我正在尝试创建一个滑块作为全宽标题。高度，我的img没有响应，如果我拉browswer width，它就会被切断。然后我设置width:100%，height:auto然后调整整个img的大小。

我希望img在此fullwidth div内部响应，例如此网站http://www.jssor.com/demos/full-width-slider.slider，如果有任何教程，请帮助我。

  <div id="home_slider">
    <div class="flexslider">
      <ul class="slides">
          <li><div style="background-image:url('/wp-content/uploads/2016/05/ABC1.jpg');"></div></li>
          <li><div style="background-image:url('/wp-content/uploads/2016/05/ABC2.jpg');"></div></li>
          <li><div style="background-image:url('/wp-content/uploads/2016/05/ABC3.jpg');"></div></li>
          <li><div style="background-image:url('/wp-content/uploads/2016/05/ABC4.jpg');"></div></li>
      </ul>
   </div>
</div>



  .flexslider ul.slides li >div {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 100% center;
    margin: 0 auto;
  }

Answer 1

首先，你应该在<img>而不是在后台使用图像。并给出宽度：100％;

Answer 2

首先，将图像放在<img>标签中。然后，您可以为这些图像提供属性： height: 100%; width; 100%; object-fit: cover;

这应该使您的图像调整大小以适应，而不是拉伸。

Answer 3

您可以将其在网站上显示的内容导出并编辑。

Img响应内部div与固定高度宽度（全宽滑块）

3 个答案: