使用 CSS 和 HTML 构建图片库答案

【问题标题】：Building image gallery with CSS and HTML使用 CSS 和 HTML 构建图片库
【发布时间】：2017-05-16 15:49:18
【问题描述】：

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

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

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

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

/_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找到

【问题讨论】：

您可以通过重置<li> 的显示设置来移除白点您可以这样做：ul { list-style-type: none; }
@ILoveCSS 这真是一个非常愚蠢的错误 :)
此外，您的图像看起来还不错，没有从它们的位置变形。

标签： html css image twitter-bootstrap jekyll

【解决方案1】：

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

【讨论】：

【解决方案2】：

要删除您可以使用的点：

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

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

对于图像，您可以尝试以下操作：

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

【讨论】：

将图像放入块中怎么样？
为了拟合图像，我使用 css 中的 background-image 而不是标签。它似乎工作得更好。然后您可以使用背景大小等。

【解决方案3】：

向下的图像拟合正确，问题是它们有一个黑色的大边框。

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

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

【讨论】：

【解决方案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>

【讨论】：