css - 使图像在 slider 中响应

Question

我在这个页面上的第一张幻灯片，促销幻灯片没有响应......我添加了

      max-width: 100%; height: auto 

到CSS。它有效但是现在在移动设备上查看时它会在图像下方添加太多空间。它还使标题消失。如何使此图像具有响应性，但去掉下面的空间？

http://new.921thefrog.com/index.php/test-promo-slider/

这是剩下的代码

      .promo_slider_wrapper { margin:10px 0; position:relative; }
    .promo_slider { height:235px; overflow:hidden; position:relative; }
     .promo_slider img {margin:0; padding:0; max-width: 100%; height: auto }
   promo_slider .panel {
overflow:hidden;
width:100%;
height:100%;
position: absolute;
top: 0;
left: 0;
 }

Answer 1

为了使图像居中，您可以将其应用于 img 元素:

img {
    position:absolute;
    width: 100%;
    height: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;

}

但是如果 H > W，你仍然需要一些 js，因为在那种情况下，高度应该是 100%，宽度应该是 auto

//编辑

刚刚看了下页面源码

<div class="promo_slider auto_advance" style=" height:418px;">

高度应该设置为auto，而不是418px