Question

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

图像库附近和内部出现了一些白点。
有些图像不适合块内。

通过访问我的personal site然后走到网站底部，可以看到这两个问题。我无法弄清楚为什么会出现这种情况。

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

/ _包括/ gallery.html

make_index_sequence

/css/grayscale.css

<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>

可以找到完整的源代码here

Answer 1

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

Answer 2

要删除可以使用的点：

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

对于IE9，您需要将list-style-type添加到li以及

您可以尝试使用以下图片：

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

Answer 3

羽绒图像正确贴合，问题是它们有一个黑色的大边框。

要删除这些点，请删除list-style-type：

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

Answer 4

看看，也许这对你很好：

* {
  box-sizing: border-box;
}

ul.photo-gallery {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0 -5px;
  padding: 0;
  list-style: none;
}
ul.photo-gallery li {
  width: 25%;
  padding: 5px;
}
ul.photo-gallery li img {
  display: block;
  width: 100%;
  border: 3px solid #fff;
  box-shadow: 1px 1px 5px #ccc;
}

<ul class="photo-gallery">
  <li>
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%201&w=150&h=150">
  </li>
  <li>
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%202&w=150&h=150">
  </li>
  <li>
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%203&w=150&h=150">
  </li>
  <li>
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%204&w=150&h=150">
  </li>
  <li>
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%205&w=150&h=150">
  </li>
  <li>
    <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Image%206&w=150&h=150">
  </li>
</ul>

使用CSS和HTML构建图库

4 个答案: