主页/WEB笔记/文章里图片怎么放，才能让长文看着不累又有范儿？

文章里图片怎么放，才能让长文看着不累又有范儿？

2,439字
10–15 分钟
in

长文章写好了，图也配了，可排出来总觉得差点意思？图片要么整整齐齐排在正文两边，要么就是几个方块戳在那儿，跟文章本身各玩各的。其实图片在文章里能干的活儿多了去了，它不光能解释内容，还能像音乐里的鼓点一样，给阅读带节奏，甚至悄悄影响人看到某个段落时的心情。想把长文做得既有自己风格，又能让人一口气读完，还真得在图片的编排上花点心思。

目录

图片怎么个“不守规矩”法

规规矩矩的网格排布，确实能让页面看着清爽整齐。但要是从头到尾都这么板正，读着读着就容易犯困。偶尔让图片“出格”一下，反而能让文章活起来。比如把一张图拽到边栏，或者让它稍微歪出格子一点点，整个页面的感觉立马就不一样了，变得随意又带劲。

实现这个“出格”的效果，在代码上其实挺简单。想让一张图超出它原本所在列的范围，用负的边距就能搞定。

/* 让图片比父容器宽百分之二十 */
.my-cool-image {
  width: 120%;
  margin-left: -10%;
  margin-right: -10%;
}

这种操作不用多，在文章关键处用上一两次，就像给文章加了个标点符号，读者的视线会被自然地牵引，注意力也重新集中起来。

图片到底该放多宽

玩过图片布局的人，肯定都琢磨过一个问题：图片宽度怎么定？是让它跟正文一样宽，老老实实待在文字堆里？还是让它撑满整个屏幕，来个视觉暴击？

这两种方法各有各的妙处。要是想让图安安稳稳地跟文字搭伙，就用这个样式：

/* 图片宽度自适应父容器 */
.article-image {
  width: 100%;
  max-width: 100%;
}

这种处理方式，在报纸、报告这类需要清晰呈现数据和图表的文章里特别好使。但要是整篇文章都用这个，难免显得有点呆板。反过来，把图片拉到屏幕边缘，瞬间就有了杂志大片的冲击力。可以通过一个技巧实现，把图片容器拉到全屏宽，再通过偏移让它居中。

/* 让图片撑满屏幕 */
.hero-image {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
}

这种全出血的图片，就像是文章里的一个戏剧性的停顿，适合用来开启一个新章节，或者展示一张能镇住场子的大图。不过得悠着点用，用多了反而会麻木，失去那种让人眼前一亮的效果。

多张图挤在一起咋整

文章里难免会碰到要放一组照片的情况，比如作品集或者案例展示。这时候要是一张张竖着往下堆，页面就会变得又长又无聊。可以试试模块化网格，这个概念听着玄乎，其实就是把页面划分成一个个小格子，再把图片放进去。

/* 创建一个四列的模块化网格 */
.image-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}

/* 让第一张图横跨所有列 */
.image-gallery figure:first-child {
  grid-column: 1 / -1;
}

这么一弄，横版图、竖版图都能在这个网格里找到自己的位置。想强调哪张图，就让它占两个格子；其他的就安安静静在旁边当配角。这种排列方式，让整组图片看起来就是一个整体，关系也更紧密。

让文字绕着图“跑”起来

多数时候，图片就是个方盒子，文字要么在盒子上面，要么在下面。就算把图往左或往右浮动，文字也只是绕着那个看不见的矩形框走。要是图片本身是个不规则的物体，比如一把吉他，或者一个被抠出来的人，那个矩形框就会显得特别生硬。CSS Shapes就能解决这个尴尬，让文字能真正地顺着物体的边缘走。

/* 让文字围绕图片的透明区域流动 */
.custom-shape {
  float: left;
  width: 300px;
  height: auto;
  shape-outside: url('guitarist.webp');
  shape-image-threshold: .5;
  shape-margin: 1rem;
}

这段代码里最骚的操作，就是用了 shape-outside: url()，直接拿图片本身的透明通道来定义形状。文字就会顺着吉他手的轮廓，或者一朵花的边缘流动，整个过程充满了设计感。这细节一加上，页面的呼吸感和人情味就上来了，读者也会在不知不觉中放慢阅读速度，多看两眼。

把图片说明整出点花样

图片下面的那一小行字，通常是灰色小字，像个跟班似的戳在那儿。但其实说明文字可以很皮，完全不用老老实实待在图片下面。

/* 用网格布局，把说明放在图片右边 */
.fancy-figure {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.fancy-figure img {
  grid-column: 1 / 6;
}

.fancy-figure figcaption {
  grid-column: 6;
}

还可以更出格一点，让说明文字直接压在图上面。

/* 让说明文字叠加在图片上 */
.overlay-figure {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.overlay-figure img {
  grid-column: 1 / 6;
  grid-row: 1;
}

.overlay-figure figcaption {
  grid-column: 5 / -1;
  grid-row: 1;
}

说明文字的位置一变，它跟图片的关系就变了。它不再是单纯的解释，而成了一个设计元素，甚至可以把它做成类似引用块的样子，跟图片本身产生对话，成为故事的一部分。

留白多和少，感觉不一样

说了这么多图片本身，其实图周围的空地儿也特别有讲究。留白不是空白，它是活的。一张图周围挤得紧，看着就紧张，适合把一组图打包在一起。相反，给图片上下留出充足的空间，整个阅读节奏就慢下来了。

/* 给图片上下留出空间 */
.breathe {
  margin-block: 3rem;
}

这种留白就像对话里的停顿，或者诗歌里的换行，给了读者喘息和思考的空隙。图片在这种宽松的环境里，也更显气质，像个精致的展品被挂在展厅里。

最新发布