jquery - 创建响应式图片库

Question

我正在尝试创建响应式图库，例如移动端的 Instagram。我想要 3 张图像的宽度，左右没有边距。我怎样才能做到这一点？

这是我目前所拥有的:

@media (max-width: 480px) {
    .portfolio-list li {
        width:33.3333%;
        height: 100px;
        border: 3px solid white;
        margin: -3px;
    }

    .portfolio-container,
    .portfolio-list {
        margin-right: 0 ;
        margin-left:0;
        margin-top:10px;
    }

    .portfolio-list {
        width: 100%;
    }
}

portfolio-list {
    list-style: none;
}

.portfolio-list li {
    position: relative;
    display: block;
    float: left;
}

.portfolio-list li img {
    display: block;
    width: 100%;
    margin:0;
    vertical-align: top;
    height: 100%;
}

<container class="portfolio-container text-center">
    <ul class="portfolio-list" style="margin:0 auto">
        <li style="margin:0 auto">
            <a href="#"><img src="{{$img['image']}}"></a>
        </li>
    </ul>
</container>

我拥有的画廊图片是:

Answer 1

编辑:也添加了桌面 View 。

• 始终将您的媒体查询放在末尾，否则它们会被后面的选择器覆盖。
• 将您的非媒体查询 .portofolio-list 切换到 flexbox。
• portfolio-list 中缺少一个点，其中 list-style: none 是。

基本上我添加了以下内容:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

重置浏览器边距并防止框折叠。

在 .portfolio-list li 上评论了 margin: -3px; 以避免破坏精确居中。

https://jsfiddle.net/ujrruyxq/7/

移动 View 中的图像:

桌面 View :