如何用HTML和CSS实现标题两侧自适应链条图片布局？

直接上适合新手的可复用代码，一步解决你的问题：

HTML结构 #

<header class="page-header">
  <div class="chain chain-left"></div>
  <h1 class="header-title">你的网站标题</h1>
  <div class="chain chain-right"></div>
</header>

CSS样式 #

/* 头部容器用Flex实现横向布局 */
.page-header {
  display: flex;
  align-items: center; /* 让链条和标题垂直居中对齐 */
  gap: 15px; /* 标题和链条之间的间距，可按需调整 */
  padding: 20px 0; /* 头部上下内边距，适配你的设计 */
}

/* 左右链条的通用样式 */
.chain {
  flex: 1; /* 让两个链条平分标题之外的剩余空间 */
  height: 25px; /* 设置链条高度，和你的图片实际高度匹配 */
  background-image: url('你的链条图片路径'); /* 替换成你的图片地址 */
  background-repeat: repeat-x; /* 水平方向重复链条图片，自动填充空间 */
  background-size: auto 100%; /* 保证图片高度和容器一致，宽度按比例自适应，不拉伸 */
}

/* 标题样式 */
.header-title {
  margin: 0; /* 去掉浏览器默认的标题外边距，避免布局偏移 */
  white-space: nowrap; /* 强制标题在一行显示，防止换行破坏布局 */
  font-size: 2rem; /* 按需调整标题大小 */
}

/* 移动端适配（可选） */
@media (max-width: 768px) {
  .header-title {
    font-size: 1.5rem;
  }
  .chain {
    height: 20px; /* 移动端缩小链条高度，适配屏幕 */
  }
}

关键逻辑说明 #

1. Flex布局：page-header用display: flex让三个元素横向排列，flex:1给链条分配剩余空间，自动适配PC/移动端的宽度变化。
2. 背景图重复：不用裁剪链条图片，直接用background-repeat: repeat-x让长链条水平重复，完美填充任意长度的空间，完全不会变形。
3. 自适应尺寸：background-size: auto 100%保证链条图片的高度和容器一致，宽度按原比例缩放，避免拉伸失真。

新手注意事项 #

• 把你的链条图片路径替换成实际的图片地址（比如本地的./assets/chain.png）。
• 调整.chain的height和标题的font-size，匹配你设计图里的尺寸。
• 如果链条图片两端有多余空白，先在图片编辑工具里裁剪掉，避免重复时出现间隙。

内容的提问来源于stack exchange，提问作者Cas