全屏移动堆叠的3列

在全尺寸屏幕上，我有三个图像，列格式应该一起占据整个屏幕。现在，我的代码起作用了，因为图像占用了屏幕宽度，并且屏幕宽度小于600像素，图像堆叠在一起。但问题是图像不占据整个宽度。代码如下，我正在使用一个很大的样本图片，但它仍然没有显示图片的整个高度。全屏移动堆叠的3列

编辑以拿出我的原代码

好吧，每个评论，我已经改变了代码如下：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/

来源

2015-07-20 damann

你可以创建一个小提琴吗？你也可以尝试最小宽度... – Medda86

你的代码看起来更像这样：＃one，＃two，＃three {width：33％;向左飘浮; }或为什么不只是.wrapper div img {} – Medda86

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

code

来源

2015-07-20 19:13:44 Medda86

这比我使用得更加优雅，谢谢。但是，图像的高度呢？ – damann

np ...高度是相对于宽度的，还是你想要做一些关于高度的事情？ – Medda86

堆栈你的意思是在eacother之上......它的确如果你让你的窗口更小...小于600px的包装... – Medda86

更新时间：

* { 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标签。

来源

2015-07-20 19:28:37

嗯..尝试所有这一切，虽然它的作品，它不是做我想要的东西它做... – damann

@damann好吧，更新试试这个。 –

全屏移动堆叠的3列

回答

相关问题