制作一个适合所有分辨率的图像的方框

Question

我知道这是一个广泛的主题和许多决议，但我认为我通过使用宽度解决了它。 这是在1920x1050： 这是1600x900：

这是代码：

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，但是如果屏幕不那么宽，那么它应该只是更少的图像，但它应该总是适合？

Answer 1

制作现代响应式布局的关键是使用媒体查询。设置断点（使用屏幕宽度，以像素为单位），这对您的布局有意义。例如，如果你想在一条600px视口宽度的线上显示更少的图像，那么就可以做到这一点;

.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/（调整窗口宽度以查看图像数量随窗口大小的变化而变化）