用CSS和HTML建立图片库

Question

我正试图为我的个人网站建立一个图片库。除了两件事外，一切都很好。

1. 一些白点正在图像画廊附近和内部发生。
2. 有些图像不适合块内。

通过访问我的个人网站，然后步行到站点的底部，我们可以看到这两个问题。我无法弄清楚为什么有些图片会发生这种情况。

人们可以看到，第二排的图像不适合块，也有一些白点。

/_include/Gallery.html

<ul class = "photo-gallery">
{% for image in site.static_files %}
    {% if image.path contains 'gallery' %}
       <li><img src="{{ site.baseurl }}{{ image.path }}" alt="image" /></li>
    {% endif %}
{% endfor %}
</ul>

/css/grayscale.css

.photo-gallery li {
    margin: 5px;
    float: left;
    width: 23%;
    border: 1px solid white;
}


.photo-gallery li img {
    width: 100%;
    height: auto;
}

完整的源代码可以找到这里。

Answer 1

要删除您可以使用的点：

.photo-gallery {
    list-style-type: none;
}

对于IE9，还需要将列表样式类型添加到li中。

对于该图像，您可以尝试如下所示：

<li style='background-image: url("{{ site.baseurl }}{{ image.path }}");' ></li>

Answer 2

ul.photo-gallery {
  list-style-type: none;
}

Answer 3

向下的图像是正确的，问题是他们有一个黑色的大边界。

移除点取走list-style-type

ul.photo-gallery {
  list-style-type: none;
}