Question

这是一个简单的Js滑块，需要让它对手机有所响应。但是当我将max-width应用于#slider和#image时，它会隐藏整个div元素。例如，默认宽度应为500pxl和300pxl高度。用于宽屏幕。它应该根据手机和平板电脑的屏幕宽度自动调整大小。可能吗？ HTML：

<body onLoad="photoA()">
<div id="slider">
<img src="Images/img1.jpg" id="image" >
 <img onClick="photo(-1)" class="left" src="Images/arrow_left.png">  
 <img onClick="photo(1)" class="right" src="Images/arrow_right.png"> 
</div>

的CSS：

*{
    margin:0px;
    }
#slider {
    height:350px;
    max-width:500px;
    margin: 5px auto;
    position:relative;
    border-radius:4px;
    overflow:hidden;
    }
#image {
    height:350px;
    width:500px;
    position:absolute;
    }

.left {
    height:50px;
    width:50px;
    position:absolute;
    top:40%;
    left:10px;
    opacity:1;
    transition: all .2s ease-in-out 0s;
    }
.right {
    height:50px;
    width:50px;
    position:absolute;
    top:40%;
    right:10px;
    opacity:1;
    transition: all .5s ease-in-out 0s;
    }
.right:hover ,  .left:hover {
    opacity:0.6; cursor: pointer;
    }

Answer 1

绝对定位主图像的原因是什么？这只会让你的生活变得悲惨。

如果进行以下更改，您将获得所需的结果：

    #slider {
        width: 100%;
        max-width:500px;
        height: auto;
        margin: 5px auto;
        position:relative;
        border-radius:4px;
      }
      #image {
        width: 100%;
        height: auto;
      }

为了让你的滑块看起来更好，我建议你也使用：

  .left {
    height:50px;
    width:50px;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    left:10px;
    opacity:1;
    transition: all .2s ease-in-out 0s;
  }
  .right {
    height:50px;
    width:50px;
    position:absolute;
    top:50%;
    transform: translateY(-50%);
    right:10px;
    opacity:1;
    transition: all .5s ease-in-out 0s;
  }

注意：div消失了，因为当它的所有子节点绝对定位时，你不能将max-width设置为父节点没有宽度和高度或者最大宽度和最大高度（它们表现得好像没有设置值）。

如何使简单的JS滑块完全响应？

1 个答案: