Question

我的网站滑块图片存在问题。我将滑块和滑块内框宽度设置为 100％，但是当我更改屏幕尺寸时，图像尺寸不会改变。另外，我将图片宽度设置为max-width:100%，将其高度设置为auto。

#sliderFrame {
  position:relative;
  width:100%;
  margin: 0 auto; /*center-aligned*/
}

#slider, #slider div.sliderInner {
  width:1280px;height:auto;/* Must be the same size as the slider images */
  border-radius: 6px;
}

#slider {
  background:#fff url(loading.gif) no-repeat 50% 50%;
  position:relative;
  transform: translate3d(0,0,0);
  box-shadow: 0px 1px 5px #999999;
}

#slider a.imgLink, #slider .video {
  z-index:2;
  cursor:pointer;
  position:absolute;
  top:0px;left:0px;border:0;padding:0;margin:0;
  width:100%;height:100%;
}

#slider div.loading {
  max-width:100%; height:auto;
  background:transparent url(loading.gif) no-repeat 50% 50%;
  filter: alpha(opacity=60);
  opacity:0.6;
  position:absolute;
  left:0;
  top:0; 
  z-index:9;
}

#slider img, #slider>b, #slider a>b {
  position:absolute; 
  border:none; 
  display:none;
  max-width:100%;
  height:auto;
}

#slider div.sliderInner {
  overflow:hidden; 
  -webkit-transform: rotate(0.000001deg);/* fixed the Chrome not crop border-radius bug*/
  position:absolute; 
  top:0; 
  left:0;
  max-width:100%;
  height:auto;
}

<div id="sliderFrame">
  <div id="slider">
    <img src="image/Index_1600x500.jpg" alt="#cap1"/>
    <img src="image/Index_TrackerPnale_1600x500.jpg"/>
    <img src="image/Index_HyundaiSantafe_1600x500.jpg" alt="#cap2"/>
    <img src="image/Index_Support.jpg" title="Support Team"/>
    <img src="image/Index_SocialMedia_1600x500.jpg" title="Social Medias"/>
  </div>
</div>

Answer 1

你的CSS并没有真正说明你的HTML - 而且，我们对滑块的真正含义一无所知 - 但请遵循这个小提琴：https://jsfiddle.net/p3r1x5sj/并查看你正在寻找的非常小的CSS

#sliderFrame {
    width:100%;
    height:100px;
    position:relative;
}
#sliderFrame #slider {
    width:100%;
    height:100%;
    position:relative;
    background:#fff url(loading.gif) no-repeat 50% 50%;
    box-shadow: 0px 1px 5px #999999;
}
#sliderFrame #slider img {
    width:100%;
    position:absolute;
    top:0;
    left:0;
}

img标签是您必须控制的。此外，除非您在最外面的容器上使用overflow:hidden;裁剪图像，否则图像可能都是不同的高度。在这种情况下，您可以考虑将div与background-images

一起使用

如何使滑块图像完全响应？

1 个答案: