在全尺寸屏幕上,我有三个列格式的图像,它们应该一起占据整个屏幕。现在,我的代码工作,因为图像占据屏幕的宽度,在屏幕上小于600px,图像堆叠在一起。但问题是图像没有占据整个宽度。代码如下,我正在使用一个巨大的示例图片,但它仍然没有显示图像的整个高度。
已编辑以取出我的原始代码
好的,根据评论,我已将代码更改为:http://jsfiddle.net/zx11x99x/
.wrapper img{
float:left;
width:100%;
}
@media screen and (min-width: 600px) {
.wrapper img{
width:33%;
}
}
<div class="wrapper">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
<img src="https://recodetech.files.wordpress.com/2014/05/early-vehicle-lores.jpg?quality=80&strip=info" alt="">
</div>
问题仍然是图像不是全屏,我似乎无法弄明白。
简而言之,我正在尝试这样做,但是在移动设备上堆叠了列 http://jsfiddle.net/9udg7qxg/
答案 0 :(得分:0)
示例示例示例示例示例示例示例示例http://jsfiddle.net/zx11x99x/
code
答案 1 :(得分:0)
更新:
* { padding: 0; margin: 0; }
@media (max-width:1400px) and (min-width:600px) {
.wrapper > img{
float:left;
max-width:33%;
}
}
@media (max-width:600px) and (min-width:100px) {
.wrapper > img{
width:100%;
display:block;
}
}
还要确保使用正确的Meta标记。