用适合所有分辨率的图像制作一个盒子

我知道这是一个广泛的主题和许多分辨率，但我认为我已经通过使用宽度解决了它。这是1920x1050： view ，这是1600×900： enter image description here

这是代码：用适合所有分辨率的图像制作一个盒子

div.content { 
    width: 80%; 
    margin: 80px auto; 
    padding: 5px; 
    border: 6px inset silver; 
    clear: none; 
    border-radius: 0px 0px 40px 40px; 
} 

div.content img.small { 
    width: 15.5%; 
    height: 100px; 
    padding: 5px; 
}

什么我需要做的，使它总是看起来像1，但如果屏幕不太宽，那么它应该只是少图像，但它应该总是适合？

来源

2013-12-13 user3068228

给图像的像素宽度，不要让它们换行和不显示他们父元素上的溢出。 'white-space：nowrap'负责不包装到下一行。 – Jasper

这就是我现在所拥有的：http：//i.imgur.com/djVDBSW.png，宽度为250，内容是白色空间：nowrap; – user3068228

请创建一个JSFiddle，以便我们可以测试出包含图像和html的代码。 – randak

使现代响应式布局的关键是使用媒体查询。设置断点（使用像素的屏幕宽度是常见的），这对您的布局有意义。例如，如果您希望在600像素的视口宽度上在一行上显示较少的图像，则可以这样做;在

.content img { 
    width: 20%; /* 5 images default */ 
} 
@media screen and (max-width: 600px) { 
    .content img { 
     width: 25%; /* 4 images when window is less than 500px */ 
    } 
}

演示：http://jsfiddle.net/6p2yM/（调整窗口宽度地看到，与窗口大小的图像改变的次数）

来源

2013-12-14 00:21:18 xec

用适合所有分辨率的图像制作一个盒子

回答

相关问题