Question

我正在为网站创建图片库。图像显示为网格：当我在计算机上打开页面时，每行都有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>

和CSS：

#image_container{
        width: 95%;
        margin: 5% auto;
        border-radius: 10px;
        border: 1px solid grey;
    }

#image_container>div{
        float: left;
        width: 290px;
        height: 164px;
        margin: 2px;
        overflow: hidden;
        border-radius: 5px;
    }

由于

Answer 1

这样做的便宜方法是在#image_container>div中更改此内容：

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

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

现在你需要保持宽高比。要做到这一点，首先要计算它：164/290 = 56.55%。取此值，从样式中删除height，然后添加：

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

由于padding-top是父元素宽度的百分比（而伪元素是其主元素的子元素）的巧妙技巧，这将为您的框提供宽高比

通过这些组合，您的盒子将保持相同的形状，但如果没有足够的空间，则会变小。

那说，给你两点：

媒体查询并不全是坏事。也许你只是做了一些不太合适的事情。我建议再次调查它们，因为它们非常强大。
通常，您需要担心的最小宽度是320px，即iPhone的宽度。我还没有遇到比这更小的屏幕，所以你的290px盒子应该没问题。

Answer 2

如果您愿意使用像Bootstrap这样的框架，那么您可以使用其网格系统来获取您正在寻找的内容而无需自己进行媒体查询。你只需要这样的标记：

<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），您就会有完整的行。

适合移动设备的图库

2 个答案: