应使用和组织每张照片，因其语义清晰、利于seo与可访问性；每张照片单独一个，内含一张和一个简短；用aspect-ratio控制比例并配合object-fit: cover，避免width/height硬设导致失真。
用 <figure></figure> 和 <figcaption></figcaption> 组织每张照片，别用 <div> 堆砌
<p>很多人一上来就用一堆 <code><div> 包图和文字，结果样式难统一、语义混乱、屏幕阅读器也读不出这是“一张带说明的照片”。<code><figure></figure> 是专为独立内容（比如婚礼照）设计的语义容器，<figcaption></figcaption> 自动绑定说明文字，对 SEO 和可访问性都有实质帮助。
实操建议：
- 每张照片单独一个
<figure></figure>，内部只放一张<img>和一个<figcaption></figcaption> -
<figcaption></figcaption>放简短信息，比如 “仪式前 · 教堂门口”，避免长句或日期格式混杂（如 “2024-05-18 14:22:03”） - 不要把多个
<img>塞进同一个<figure></figure>—— 这违反 HTML 规范，CSS 布局也会变复杂
用 aspect-ratio 控制图片比例，而不是靠 width + height 硬设
婚礼照片尺寸不一，强行用固定 width 和 height 会导致拉伸或裁剪失真。现代浏览器（Chrome 88+、Firefox 89+、Safari 15.4+）已普遍支持 aspect-ratio，它能锁定宽高比，让图片在缩放时自然保持构图。
实操建议：
- 给
<img>设置aspect-ratio: 4/3;或aspect-ratio: 1/1;（根据你照片主流比例选） - 配合
object-fit: cover;确保图片填满容器且不畸变 - 避免同时设
width和height—— 它们会覆盖aspect-ratio，尤其在响应式布局中容易出错 - 如果需兼容旧版 Safari（aspect-ratio
用 display: grid 实现错落有致的 Masonry 效果，但别真用 grid-template-rows 手动写行高
所谓“简约优雅”的相册，往往指非整齐方阵、略带呼吸感的错列排布。CSS Grid 本身不原生支持 Masonry（瀑布流），但 grid-auto-flow: dense; 配合 grid-template-columns 可模拟轻量级错落效果，无需 JS 库。
实操建议：
- 容器设
display: grid;，列用grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))，保证小屏单列、大屏自适应 - 每张
<figure></figure>设margin-bottom: 1.2rem;（不是gap），避免网格间隙干扰视觉节奏 - 慎用
grid-row-end: span 2;手动控制高度 —— 容易导致后续项错位，尤其当照片数量动态变化时 - 若必须严格 Masonry（比如不同高度照片需无缝拼接），改用
column-count+break-inside: avoid;更稳妥，但牺牲部分对齐精度
字体与留白比配色更重要，font-family 别堆 Sans-serif 变体
婚礼相册的“优雅”几乎不靠颜色 —— 很多失败案例是用了太多莫兰迪色卡却压不住杂乱排版。真正起作用的是：一行不超过 65 字符、段间距 ≥ 行高的 1.6 倍、标题与正文至少差两个字重层级。
实操建议：
- 正文字体统一用系统默认
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;，别额外引入 Google Fonts 增加加载延迟 - 标题用
font-weight: 500;，正文用font-weight: 400;，避免全站都用font-weight: 300;—— 小字号下灰度太高，阅读吃力 -
line-height设为1.6，margin-bottom设为1.6em，让文字区块自带呼吸感 - 配色只用一种主色（比如 #e6d3a7 作边框或分隔线），其余全用黑白灰 —— 多色系反而削弱照片主体
最容易被忽略的其实是图片加载顺序：别让浏览器按 HTML 顺序逐张加载，用 loading="lazy" + decoding="async" 控制解码时机，否则首屏三张大图可能卡住整个界面渲染。这和“简约”无关，但直接决定用户第一眼是否愿意停留。
