响应时如何保持滑块图像成比例？

Question

我在主页上有一个滑块，在其他静态页面上有其他大型英雄图像。所有 100% 屏幕宽度。在较小的屏幕上，其他英雄图像保持比我的滑块图像更大（高度）。所有图像高度都设置为自动。

我需要滑块图像不只是根据全宽进行缩放。我不在乎它们是否被截断，移动设备上的图像高度变得太小了。似乎区别在于背景大小：封面和填充。但是当我尝试它时它不起作用，我要么把它放在错误的元素上，要么因为滑块宽度为 500% 而弄乱了它？

英雄图像是这样构建的：

    <div class="hero" style="background-image: url('/images/static/shop/hero_necklaces.jpg');">
                    <div class="hero-text">
                        <h1>Jewelry</h1>
                    </div>
                </div>

    @media (max-width: 480px)
    .hero {
     padding-top: 60px;
     padding-bottom: 60px;
    }

      @media (max-width: 650px)
      .hero {
      padding-top: 90px;
      padding-bottom: 90px;
      }

    .hero {
    width: 100%;
    height: auto;
    padding-top: 140px;
    padding-bottom: 140px;
    display: table;
     vertical-align: middle;
   -webkit-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    }

滑块是这样构建的：

     <div id="captioned-gallery" class="homepage-slider">
       <figure class="slider">
         <figure>
           <a href="${request.contextPath}/category/Jewelry"><img               src="${request.contextPath}/images/static/home/header_hero1.jpg" alt="The 2015 Fall Collection"></a>
        <!--<figcaption class="hero-text">Sample Text 1</figcaption>-->
      </figure>
      <figure>
        <a href="${request.contextPath}/jsp/static/joinUs.jsp"><img src="${request.contextPath}/images/static/home/header_hero2.jpg" alt="Get Paid to Share the Hope"></a>
    </figure>
    <figure>
        <a href="${request.contextPath}/jsp/static/impact.jsp"><img src="${request.contextPath}/images/static/home/header_hero3.jpg" alt="Handcrafted Artisan Made"></a>
      </figure>
       <figure>
        <a href="${request.contextPath}/category/Jewelry"><img src="${request.contextPath}/images/static/home/header_hero1.jpg" alt="The 2015 Fall Collection"></a>
       </figure>
      </figure>
     </div>


    div#captioned-gallery {
            width: 100%;
            overflow: hidden;
           }
    .homepage-slider {
            padding-bottom: 115px;
           }
     figure { margin: 0; }
      @-webkit-keyframes slidy { 
        0%  { left: 0%; }
        20% { left: 0%; }
        25% { left: -100%; }
        45% { left: -100%; }
        50% { left: -200%; }
        70% { left: -200%; } 
        75% { left: -300%; }
        100% { left: -300%; } 
        }
     @keyframes slidy { 
        0%  { left: 0%; }
        20% { left: 0%; }
        25% { left: -100%; }
        45% { left: -100%; }
        50% { left: -200%; }
        70% { left: -200%; } 
        75% { left: -300%; }
        100% { left: -300%; } 
       }
   figure.slider {
      position: relative;
      width: 500%;
      font-size: 0;
      -webkit-animation: 40s slidy infinite;
      animation: 40s slidy infinite;
     }
    figure.slider figure { 
       width: 20%;
       height: auto;
       display: inline-block;
       position: inherit;
     }
     figure.slider img {
       width: 100%;
        height: auto;
       margin: 0px;
      }

Answer 1

滑块似乎工作正常，除了最后的长时间停顿。我已将滑块的宽度调整为 400%，每张幻灯片调整为 25%，以及动画。我猜这个滑块原本有 5 张幻灯片（4 张，第一次在末尾重复），而你没有调整它。

div#captioned-gallery {
  width: 100%;
  overflow: hidden;
}
.homepage-slider {
  padding-bottom: 115px;
}
figure {
  margin: 0;
}
@-webkit-keyframes slidy {
  0% {
    left: 0%;
  }
  30% {
    left: 0%;
  }
  33.33% {
    left: -100%;
  }
  63.33% {
    left: -100%;
  }
  66.66% {
    left: -200%;
  }
  96.66% {
    left: -200%;
  }
  99.99% {
    left: -300%;
  }
  100% {
    left: -300%;
  }
}
@keyframes slidy {
  0% {
    left: 0%;
  }
  30% {
    left: 0%;
  }
  33.33% {
    left: -100%;
  }
  63.33% {
    left: -100%;
  }
  66.66% {
    left: -200%;
  }
  96.66% {
    left: -200%;
  }
  99.99% {
    left: -300%;
  }
  100% {
    left: -300%;
  }
}
figure.slider {
  position: relative;
  width: 400%;
  font-size: 0;
  -webkit-animation: 10s slidy infinite;
  animation: 10s slidy infinite;
}
figure.slider figure {
  width: 25%;
  height: auto;
  display: inline-block;
  position: inherit;
}
figure.slider img {
  width: 100%;
  height: auto;
  margin: 0px;
}

<div id="captioned-gallery" class="homepage-slider">
  <figure class="slider">
    <figure>
      <a href="${request.contextPath}/category/Jewelry">
        <img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
      </a>
      <!--<figcaption class="hero-text">Sample Text 1</figcaption>-->
    </figure>
    <figure>
      <a href="${request.contextPath}/jsp/static/joinUs.jsp">
        <img src="http://placehold.it/1280x600/0ff000" alt="Get Paid to Share the Hope">
      </a>
    </figure>
    <figure>
      <a href="${request.contextPath}/jsp/static/impact.jsp">
        <img src="http://placehold.it/1280x600/00ff00" alt="Handcrafted Artisan Made">
      </a>
    </figure>
    <figure>
      <a href="${request.contextPath}/category/Jewelry">
        <img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
      </a>
    </figure>
  </figure>
</div>

如果您希望滑块图像在移动设备上“更高”，随着屏幕尺寸逐渐缩小，那么我的建议是使用 calc on width 和 margin left（margin）的组合来增加 .slider 对象的大小宽度差的一半），并在 .home-page-slider 上添加溢出：隐藏。

如果您不介意突然移动，例如宽度为 600 像素或更小，那么只需在 img 上的那个断点处将边距设置为 -10%，宽度为 120%，如下所示：

div#captioned-gallery {
  width: 100%;
  overflow: hidden;
}
.homepage-slider {
  padding-bottom: 115px;
}
figure {
  margin: 0;
}
@-webkit-keyframes slidy {
  0% {
    left: 0%;
  }
  30% {
    left: 0%;
  }
  33.33% {
    left: -100%;
  }
  63.33% {
    left: -100%;
  }
  66.66% {
    left: -200%;
  }
  96.66% {
    left: -200%;
  }
  99.99% {
    left: -300%;
  }
  100% {
    left: -300%;
  }
}
@keyframes slidy {
  0% {
    left: 0%;
  }
  30% {
    left: 0%;
  }
  33.33% {
    left: -100%;
  }
  63.33% {
    left: -100%;
  }
  66.66% {
    left: -200%;
  }
  96.66% {
    left: -200%;
  }
  99.99% {
    left: -300%;
  }
  100% {
    left: -300%;
  }
}
figure.slider {
  position: relative;
  width: 400%;
  font-size: 0;
  -webkit-animation: 10s slidy infinite;
  animation: 10s slidy infinite;
}
figure.slider figure {
  width: 25%;
  height: auto;
  display: inline-block;
  position: inherit;
  overflow:hidden;
}
figure.slider img {
  width: 100%;
  height: auto;
  margin: 0px;
}
@media (max-width: 600px)
{
  figure.slider img { width: 120%; margin-left: -10%; margin-right: -10% }
}

<div id="captioned-gallery" class="homepage-slider">
  <figure class="slider">
    <figure>
      <a href="${request.contextPath}/category/Jewelry">
        <img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
      </a>
      <!--<figcaption class="hero-text">Sample Text 1</figcaption>-->
    </figure>
    <figure>
      <a href="${request.contextPath}/jsp/static/joinUs.jsp">
        <img src="http://placehold.it/1280x600/0ff000" alt="Get Paid to Share the Hope">
      </a>
    </figure>
    <figure>
      <a href="${request.contextPath}/jsp/static/impact.jsp">
        <img src="http://placehold.it/1280x600/00ff00" alt="Handcrafted Artisan Made">
      </a>
    </figure>
    <figure>
      <a href="${request.contextPath}/category/Jewelry">
        <img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
      </a>
    </figure>
  </figure>
</div>

流畅：

div#captioned-gallery {
  width: 100%;
  overflow: hidden;
}
.homepage-slider {
  padding-bottom: 115px;
}
figure {
  margin: 0;
}
@-webkit-keyframes slidy {
  0% {
    left: 0%;
  }
  30% {
    left: 0%;
  }
  33.33% {
    left: -100%;
  }
  63.33% {
    left: -100%;
  }
  66.66% {
    left: -200%;
  }
  96.66% {
    left: -200%;
  }
  99.99% {
    left: -300%;
  }
  100% {
    left: -300%;
  }
}
@keyframes slidy {
  0% {
    left: 0%;
  }
  30% {
    left: 0%;
  }
  33.33% {
    left: -100%;
  }
  63.33% {
    left: -100%;
  }
  66.66% {
    left: -200%;
  }
  96.66% {
    left: -200%;
  }
  99.99% {
    left: -300%;
  }
  100% {
    left: -300%;
  }
}
figure.slider {
  position: relative;
  width: 400%;
  font-size: 0;
  -webkit-animation: 10s slidy infinite;
  animation: 10s slidy infinite;
}
figure.slider figure {
  width: 25%;
  height: auto;
  display: inline-block;
  position: inherit;
  overflow: hidden;
}
figure.slider img {
  width: 100%;
  height: auto;
  margin: 0px;
}
@media (max-width: 600px) {
  figure.slider img {
    width: -webkit-calc(100% + ((600px - 100%) / 5));
    width: calc(100% + ((600px - 100%) / 5));
    margin-left: -webkit-calc(10% - 60px);
    margin-left: calc(10% - 60px);
    margin-right: -webkit-calc(10% - 60px);
    margin-right: calc(10% - 60px);
  }
}

<div id="captioned-gallery" class="homepage-slider">
  <figure class="slider">
    <figure>
      <a href="${request.contextPath}/category/Jewelry">
        <img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
      </a>
      <!--<figcaption class="hero-text">Sample Text 1</figcaption>-->
    </figure>
    <figure>
      <a href="${request.contextPath}/jsp/static/joinUs.jsp">
        <img src="http://placehold.it/1280x600/0ff000" alt="Get Paid to Share the Hope">
      </a>
    </figure>
    <figure>
      <a href="${request.contextPath}/jsp/static/impact.jsp">
        <img src="http://placehold.it/1280x600/00ff00" alt="Handcrafted Artisan Made">
      </a>
    </figure>
    <figure>
      <a href="${request.contextPath}/category/Jewelry">
        <img src="http://placehold.it/1280x600/000ff0" alt="The 2015 Fall Collection">
      </a>
    </figure>
  </figure>
</div>