这是一个简单的 Js slider ，需要使其响应移动设备。但是当我将最大宽度应用于#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;
}
最佳答案
绝对定位主图的原因是什么？这只会让你的生活变得悲惨。
如果您进行以下更改，您将获得所需的结果:
#slider {
width: 100%;
max-width:500px;
height: auto;
margin: 5px auto;
position:relative;
border-radius:4px;
}
#image {
width: 100%;
height: auto;
}
为了使您的 slider 看起来更好，我建议您还使用:
.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 消失了，因为当它的所有子元素都绝对定位时，您不能将最大宽度设置为父元素没有宽度和高度或最大宽度和最大高度(它们的行为就好像它们没有设置值一样) .
关于html - 如何使简单的 JS slider 完全响应？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48723728/