如何用CSS在H1标签前后添加响应式图片？

看起来你已经搭好了H1的基础结构，现在需要把原本的线条替换成能自适应屏幕的图片对吧？我来帮你调整CSS，实现这个需求：

我们可以通过flex布局让H1内部的元素对齐更灵活，再结合background-image和响应式单位来实现图片的自适应缩放。下面给你两种可行方案，你可以根据自己的HTML结构选择：

方案1：沿用你现有的HTML结构 #

你的HTML（可以复制一份.logo做右侧图片）：

<h1>
  <i class="logo logo-left"></i>
  <span>HELLO WORLD</span>
  <i class="logo logo-right"></i>
</h1>

对应的CSS代码：

h1 {
  position: relative;
  color: #fff;
  font-family: sans-serif;
  /* 用clamp实现响应式字体，自动适配屏幕 */
  font-size: clamp(2rem, 5vw, 4.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02rem;
  margin: 0 auto 5rem;
  padding: 0 1rem;
  /* 用flex让图片和文字横向居中对齐 */
  display: flex;
  align-items: center;
  gap: 1.5rem; /* 控制图片和文字的间距 */
  background-color: #222; /* 加背景方便预览效果 */
}

.logo {
  /* 响应式尺寸：最小30px，最大80px，中间随视窗宽度缩放 */
  width: clamp(30px, 8vw, 80px);
  height: auto;
  /* 替换成你的图片地址 */
  background-image: url('你的左侧图片URL');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain; /* 保持图片比例，完整显示 */
}

/* 如果左右图片不同，单独设置右侧图片 */
.logo-right {
  background-image: url('你的右侧图片URL');
}

方案2：用伪元素实现（无需额外HTML标签） #

如果不想添加多余的<i>标签，直接用H1的伪元素来生成前后图片：

HTML结构更简洁：

<h1><span>HELLO WORLD</span></h1>

对应的CSS代码：

h1 {
  position: relative;
  color: #fff;
  font-family: sans-serif;
  font-size: clamp(2rem, 5vw, 4.6rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .02rem;
  margin: 0 auto 5rem;
  padding: 0 1rem;
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  background-color: #222;
}

h1:before, h1:after {
  content: '';
  width: clamp(30px, 8vw, 80px);
  /* 用padding-top维持图片宽高比，比如60%对应3:5的比例 */
  padding-top: 60%;
  background-image: url('你的左侧图片URL');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* 单独设置右侧图片 */
h1:after {
  background-image: url('你的右侧图片URL');
}

核心技巧说明 #

• clamp()函数：实现元素尺寸的响应式缩放，兼顾小屏和大屏的显示效果
• background-size: contain：保证图片完整显示且比例不变，不会被拉伸变形
• flex布局：让图片和文字垂直居中对齐，比绝对定位更灵活，响应式表现更好
• 宽高比控制：用padding-top的百分比技巧（基于父元素宽度），固定图片的宽高比，避免变形

这样调整后，H1前后的图片就会跟着屏幕尺寸自动适配，完美实现你想要的响应式效果啦！

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