我正在尝试使用 Javascript 创建一个图像网格，并且我想在其中一个图像的底部嵌入一个范围 slider 。为了获得网格，我使用了 flex-container(下面我只显示两个数字，1 和 2，作为示例，但在实际应用中它们被图像替换):
<style>
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: LightYellow;
}
.flex-item {
background-color: #f1f1f1;
width: 300px;
margin: 10px;
text-align: center;
line-height: 300px;
font-size: 30px;
}
</style>
<body>
<div class="flex-container">
<div class="flex-item">1</div>
<div class="flex-item"> 2 </div>
</div>
</body>
这部分工作正常 - 我可以并排获得两张图片，如我所愿:
现在，假设我想向第二个 div 添加一个范围幻灯片。所以我将其添加到我的样式中:
.slidecontainer {
flex: 0 1 auto;
order: 0;
position: relative;
align-items: center;
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 15px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 15px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
然后尝试将 slider 嵌入其中一个 flex-container div，比如说第二个:
<div class="flex-item"> 2
<div class="slidercontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
</div>
由于我不明白图像爆炸的原因。这是它们现在的样子:
有没有办法保持图像尺寸不变，只需在其 div 中的一个图像底部添加 slider ？
谢谢!
最佳答案
这是 HTML:
<div class="flex-container">
<div class="flex-item">
<img src="https://placeimg.com/300/150/any" alt="">
</div>
<div class="flex-item">
<img src="https://placeimg.com/300/150/any" alt="">
<div class="slidercontainer">
<input type="range" min="1" max="100" value="50" class="slider" id="myRange">
<p>Value: <span id="demo"></span></p>
</div>
</div>
</div>
这是 CSS:
img {
max-width: 100%;
object-fit: cover;
}
.flex-container {
display: flex;
flex-wrap: wrap;
background-color: LightYellow;
}
.flex-item {
background-color: #f1f1f1;
width: 300px;
margin: 10px;
font-size: 30px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.slidecontainer {
flex: 0 1 auto;
order: 0;
position: relative;
align-items: center;
width: 100%;
}
.slider {
-webkit-appearance: none;
width: 100%;
height: 5px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}
.slider:hover {
opacity: 1;
}
.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 15px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
.slider::-moz-range-thumb {
width: 25px;
height: 15px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
}
关于javascript - 如何将范围 slider 保持在 flex 容器的 div 中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53219421/