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＆gt;你仍需要一些js。 W，因为在这种情况下，高度应为100％，宽度为自动

//编辑

我刚看了一下页面源代码

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

高度应设置为自动，而不是418px

在滑块中使图像响应

1 个答案: