Question

希望这对某人来说毫无疑问。基本上我想要实现的目标如下。

视节点宽度取决于显示的图像数量，这些图像将始终填充空间100％，但根据宽度显示的图像较少。

HTML可能是：

<div class="image">
            <img src="XXXX.jpg"/> 
</div>
<div class="image">
            <img src="XXXX.jpg"/> 
</div>
<div class="image">
            <img src="XXXX.jpg"/> 
</div>
<div class="image">
            <img src="XXXX.jpg"/> 
</div>
<div class="image">
            <img src="XXXX.jpg"/> 
</div>
<div class="image">
            <img src="XXXX.jpg"/> 
</div>
<div class="image">
            <img src="XXXX.jpg"/> 
</div>

因此，在超过1200px的屏幕上，我们将显示所有图像（在一行上），而在400px或更低的屏幕上，我们只显示2张图像。

我想有一个JS解决方案，但我相对较新的JS，似乎无法找到一个可理解且相关的解决方案。

提前致谢

Answer 1

有一个CSS解决方案。您可以使用媒体查询来执行此操作。

@media (max-width: 400px){
    //your code
}

Answer 2

无需媒体查询

HTML

<div class="wrapper">    
<div class="image">
                <img src="XXXX.jpg"/> 
    </div>
    <div class="image">
                <img src="XXXX.jpg"/> 
    </div>
    <div class="image">
                <img src="XXXX.jpg"/> 
    </div>
    <div class="image">
                <img src="XXXX.jpg"/> 
    </div>
    <div class="image">
                <img src="XXXX.jpg"/> 
    </div>
    <div class="image">
                <img src="XXXX.jpg"/> 
    </div>
    <div class="image">
                <img src="XXXX.jpg"/> 
    </div>
</div>

CSS：

.wrapper{width:100%;overflow:hidden}
.wrapper .image{float:left;}

Answer 3

经过测试：

<强> HTML：

<div class="image f_left">
        <img src="bill.png"/> 
</div>
<div class="image f_left">
        <img src="bill.png"/> 
</div>
<div class="image f_left">
        <img src="bill.png"/> 
</div>
<div class="image f_left">
        <img src="bill.png"/> 
</div>
<div class="image f_left">
        <img src="bill.png"/> 
</div>
<div class="image f_left">
        <img src="bill.png"/> 
</div>
<div class="image f_left">
        <img src="bill.png"/> 
</div>

CSS：必须

.f_left
{
    float:left;
    padding-bottom: 5%;
}
@media only screen and (max-width : 480px) {
     /* Smartphone view: 1 tile */
   .image{
       width: 100%;
    }
}
@media only screen and (max-width : 650px) and (min-width : 481px) {
     /* Tablet view: 2 tiles */
   .image {
       width: 50%;
    }
}
@media only screen and (max-width : 1050px) and (min-width : 651px) {
    /* Small desktop / ipad view: 3 tiles */
    .image {
        width: 33.3%;
    }
}
@media only screen and (max-width : 1290px) and (min-width : 1051px) {
     /* Medium desktop: 4 tiles */
     .image {
        width: 25%;
    }
}
@media only screen and (max-width : 1600px) and (min-width : 1291px) {
     /* Medium desktop: 4 tiles */
     .image {
        width: 20%;
     }
}

响应式图像库

3 个答案: