Html 移动友好图像库

我正在为一个网站创建一个图像库。图像显示为网格：当我在计算机上打开页面时，每行有3个图像，但根据窗口的宽度，我可能会得到更多或更少的图像。这看起来一点也不糟糕，但我想对它进行改进，使其仅显示两个图像，或者每行仅显示一个图像，具体取决于屏幕大小。我可以使用媒体查询，但我对它们只有不好的记忆，如果可能的话，我希望避免使用它们。以下是我的HTML的外观：

<div id="image_container">
    <div style="background: url("image 1 url") center center no-repeat"></div>
    <div style="background: url("image 2 url") center center no-repeat"></div>
    (....)
    <div style="background: url("image x url") center center no-repeat"></div>
    <span style="display:block; clear: both;"></span>
</div>

---

谢谢

在

#image_container>div

中更改此选项是一种省钱的方法：

width: 100%;
max-width: 290px;

这个技巧将确保在太小的屏幕上，图像只占据屏幕宽度，而不是指定的

290px

现在需要保持纵横比。为此，首先计算它：

164/290=56.55%

。取此值，从样式中删除

高度

，然后添加以下内容：

#image_container>div:before {
    display: block;
    content: '';
    padding-top: 56.55%;
}

这将为您的长方体提供纵横比，因为

padding top

是父元素宽度的一个百分比（伪元素是其主元素的子元素）

这些组合在一起，你的盒子将保持原来的形状，但如果没有足够的空间，只会变得更小

也就是说，你有两点：

媒体查询并不都是坏事。也许你只是对他们做了些不太对劲的事。我建议再次研究它们，因为它们非常强大

一般来说，你需要担心的最小宽度是320px，iPhone的宽度。我还没有遇到比这个更小的屏幕，所以你的290像素的盒子应该没问题

---

如果你愿意使用这样的框架，你可以使用它的网格系统来获得你想要的东西，而不用自己做媒体查询。您只需要这样的标记：

<div id="image_container">
    <div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
    <div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
    <div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
    <div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
</div>

---

只要每行显示的图像数是12（1、2、3、4或6）的一个因数，那么您将始终拥有完整的行。

谢谢。我一直在寻找这样的解决方案。事实上，当屏幕分辨率低于290px时，我不一定要拍摄全部图像。例如，我有一部720p的智能手机，我希望图像能覆盖整个屏幕。媒体查询是唯一的出路吗？可能是的

@media all和（最大宽度：720px）{…}

应该是您所需要的。

<div id="image_container">
    <div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
    <div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
    <div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
    <div class="col-sm-6 col-md-4 col-lg-3"><!-- Image --></div>
</div>