全屏 3 列，可堆叠在移动设备上

Question

在全尺寸屏幕上，我有三张以列格式显示的图像，它们应该一起占据整个屏幕。现在，我的代码有效，因为图像占据了屏幕的宽度并且在屏幕上小于 600 像素，图像一个接一个地堆叠。但问题是图像没有占据整个宽度。代码在下面，我正在使用一个巨大的示例图片，但它仍然没有显示图像的整个高度。

编辑以删除我的原始代码

好的，根据评论，我已将代码更改为：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

还要确保您使用了正确的元标记。

全屏 3 列，可堆叠在移动设备上

Full screen 3 columns that stack on mobile

html

css

multiple-columns