使用 CSS 和 HTML 构建图片库

Question

我正在尝试为我的个人网站建立一个图片库。除两件事外，一切正常。

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

通过访问我的 personal site 然后走到站点底部可以看到这两个问题。我无法弄清楚为什么某些图像会发生这种情况。

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

/_includes/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;
}

可以找到完整的源代码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 构建图片库

Building image gallery with CSS and HTML

html

css

image

jekyll

twitter-bootstrap