html - Img 在具有固定高度宽度的 div 内响应(全宽 slider )

Question

我正在尝试创建一个 slider 作为全 Angular 标题，当我设置固定宽度和高度时，我的 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> 中标签。 然后，您可以为这些图像提供以下属性: height: 100%; width; 100%; object-fit: cover;

这应该可以让您的图像调整大小以适合，而不是拉伸(stretch)。