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

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>

如果你想让滑块图像在移动设备上“更高”，逐渐随着屏幕尺寸缩小，那么我的建议是使用宽度和边距上的计算结果来增加.slider对象的大小（边距）左边宽度的一半），并添加溢出：隐藏在.home-page-slider。

如果您不介意突然转移，例如600px宽度或更小，那么只需在img上的那个beakpoint处留下-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>