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

我在首页上有一个滑块，在其他静态页面上有其他大型英雄图像。所有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;
      }

最佳答案

滑块似乎工作正常，除了最后长时间停顿。我已经将滑块的宽度调整为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的宽度和左边距来增加.slider对象的大小（左边距的一半宽度的差异），并在.home-page-slider上添加overflow：hidden。

如果您不介意突然变化，例如宽度为600px或更小，则只需在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>