网页图片展示

Posted on In , Views: Waline:

在Markdown中如何设置图片居中中介绍过图片居中的方法，对于偏重文字的博客基本就够用了。不过对于用于记录生活的微博站点来说图片才是重点，如何紧凑、美观的展示图片就很重要了。

反防盗链

单张图片没有太多可说的，使用Markdown语法或者HTML的<img>标签都可以，后者可设置图片缩放比例及一些属性。一个常见问题是现在很多网站都加入了防盗链措施，从外部引用网站资源(如图片)时会遇到403错误。
网站防盗链的常见措施为根据请求的Referrer属性判断请求是否来自于本站域名，不是就返回403。应对的方法是在请求资源时不提供Referrer信息。具体又有两种做法，分别用于整个页面及某个具体元素。
针对网页所有元素：在网页头部(<head>...</head>)添加元信息

1
<meta name="referrer" content="no-referrer" />

针对具体某个元素：设置referrerPolicy属性为no-referrer

1
<img src="xxx"  referrerPolicy="no-referrer" />

更详细介绍及其他应对方法可查看主流浏览器图片反防盗链方法总结

九宫格/瀑布流

基于CSS可实现元素的分栏布局，进而实现最简单的图片九宫格及瀑布流。一个问题是这里的九宫格并不会像微博/微信一样调整缩略图，确保行列对齐，而是按原图大小成比例缩放，如果图片本身尺寸不一，最终效果会不太美观，不过还是可以应对大部分情况的需求。

FlexBox

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
.row {display: flex;}
.column {flex: 30%;}
.column img {margin:-1px !important; border: none;}
</style>

<div class="row">
  <div class="column">
    <img src="xxx" />
    <img src="xxx" />
    <img src="xxx" />
  </div>
  <div class="column">
    <img src="xxx" />
    <img src="xxx" />
    <img src="xxx" />
  </div>
  <div class="column">
    <img src="xxx" />
    <img src="xxx" />
    <img src="xxx" />
  </div>
</div>

稍复杂的，还可实现根据屏幕宽度自适应调整列数，具体可参考Responsive Image Grid - W3Schools。

column-count

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<style type="text/css">
#layout-grid {   
  -webkit-column-count: 3; /* Chrome, Safari, Opera */
  -moz-column-count:    3; /* Firefox */
  column-count:         3;

  -webkit-column-gap:   0px;
  -moz-column-gap:      0px;
  column-gap:           0px;  
}

#layout-grid img {
  margin: -1px !important;
  border: none;
}
</style>

<section id="layout-grid">
    <img src="xxx" />
    <img src="xxx" />
    <img src="xxx" />
    ...
</section>

基于column-count同样可实现自适应调整列数，具体参考Seamless Responsive Photo Grid - CSS Tricks

注：上述两种方法中图片属性设置.column img {margin:-1px !important;}及#layout-grid img {margin:-1px !important;}都是针对NexT主题的，用于减小默认较宽的图片间隙。

更复杂的图片展示，如实现点击放大 (Modal Images) 、点击切换 (Gallery) 、灯箱效果 (Lightbox) 、幻灯片放映 (Slideshow) 、拉幕效果 (Comparison Slider) 等，除了CSS之外通常还需要Javascript代码，具体通常可参考W3Schools How To中图片相关内容。除了上述复杂效果，也有图片上显示文字、缩略图、图片背景、高斯模糊等常见效果的实现。

除了使用CSS/Js自行实现各种复杂的图片展示效果，还可以直接使用外部Js库，如fancybox、PhotoSwipe、lightgallery.js、fslightbox等。

NexT主题

NexT主题提供了 group picture 标签，用于在正文插入图集。使用时需要指定图片总数及布局，其中布局决定了每行的图片数量，比如5张图片有1,2,2、2,3、3,2等不同排版布局。布局以数字代表，具体排版则随图片总数而变化，并没有规律，可查看next/scripts/tags/group-pictures.js了解具体布局。这种方式插入图集同样不能很好应对图片尺寸不一时的情况。

1
2
3
4
5
6
7
{% gp 5-4 %}
  ![](xxx)
  ![](xxx)
  ![](xxx)
  <img src="xxx" />
  <img src="xxx" />
{% endgp %}