html - 如何在响应时保持 slider 图像成比例？

Question

我在主页上有一个 slider ，在其他静态页面上有其他大型英雄图片。所有 100% 屏幕宽度。在较小的屏幕上，其他英雄图像(高度)比我的 slider 图像大。所有图像高度都设置为自动。

我需要 slider 图像不只是基于全宽缩放。我不在乎它们是否被截断，图像高度在移动设备上变得太小了。似乎区别在于 background-size: cover 和 padding。但是，当我尝试它时，它的工作方式不一样，我要么把它放在错误的元素上，要么因为 slider 宽度为 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;
    }

slider 是这样构建的:

     <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

slider 似乎工作正常，除了最后的长时间停顿。我已将 slider 的宽度调整为 400%，每张幻灯片调整为 25%，以及动画。我猜 slider 最初有 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 图像在移动设备上“更高”，随着屏幕尺寸逐渐缩小，那么我的建议是结合使用宽度计算和左边距(边距)来增加 .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>