Question

在全尺寸屏幕上，我有三个列格式的图像，它们应该一起占据整个屏幕。现在，我的代码工作，因为图像占据屏幕的宽度，在屏幕上小于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/

Answer 1

示例示例示例示例示例示例示例示例http://jsfiddle.net/zx11x99x/

code

Answer 2

更新：

* { 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;
    }
}

JSFIDDLE

还要确保使用正确的Meta标记。

在移动设备

2 个答案: