我正在尝试弄清楚如何使一行图像响应窗口宽度。到目前为止,我有:
<div class="image-slider">
<div><img src="/img1.jpg"></div>
<div><img src="/img2.jpg"></div>
<div><img src="/img3.jpg"></div>
<div><img src="/img4.jpg"></div>
<div><img src="/img5.jpg"></div>
</div>
和...
.image-slider {
display: flex;
overflow-y: scroll;
}
.image-slider div {
flex: 1;
margin: 5px
}
.image-slider div img {
width: 100%;
height: auto;
min-width: 125px;
}
这很好用,但我现在想要的是当窗口小于 880 像素时让第五张图片消失,并调整其余四张图片的大小以占用剩余空间。
我尝试将 wide-only
类添加到第五个 div
标签:
<div class="wide-only"><img src="/img5.jpg"></div>
然后添加了一些媒体规则,如下所示,但效果不佳:
.image-slider div img.wide-only {
display:none;
}
@media(min-width:880px) {
.image-slider div img.wide-only {
flex: 1 /* not sure what this should be - tried display: flex too */
}
}
最佳答案
你添加了 display:none
所以在媒体查询中你应该添加 display:block
(我还纠正了一些 CSS 选择器,因为你没有定位正确的标签):
.image-slider .wide-only {
display:none;
}
@media(min-width:880px) {
.image-slider .wide-only {
display:block;
flex: 1 /* not sure what this should be - tried display: flex too */
}
}
完整代码:
.image-slider {
display: flex;
overflow-y: scroll;
}
.image-slider div {
flex: 1;
margin: 5px
}
.image-slider div img {
width: 100%;
height: auto;
min-width: 125px;
}
.image-slider .wide-only {
display: none;
}
@media(min-width:880px) {
.image-slider .wide-only {
display: block;
flex: 1/* not sure what this should be - tried display: flex too */
}
}
<div class="image-slider">
<div><img src="https://lorempixel.com/400/400/"></div>
<div><img src="https://lorempixel.com/400/400/"></div>
<div><img src="https://lorempixel.com/400/400/"></div>
<div><img src="https://lorempixel.com/400/400/"></div>
<div class="wide-only"><img src="https://lorempixel.com/400/400/"></div>
</div>
关于html - 如何制作响应式图像行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47296298/