适配任意屏幕宽度的带文本响应式图片实现咨询

要实现图片自适应缩放、完整显示、间距一致且占满屏幕宽度，可通过以下两种方式解决：

方法一：使用 <img> 标签（推荐，更易维护且支持无障碍） #

这种方式无需计算图片比例，浏览器会自动维持图片的宽高比，确保文本不扭曲、图片完整显示。

修改后的代码 #

HTML

<nav class="nav-primary"></nav>

<header class="custom-header">
  <img src="https://i.ibb.co/SwSktxv/desktop.png" alt="头部横幅">
</header>

CSS

.nav-primary {
    background-color: #222;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    height: 32px;
}

.custom-header {
    margin-top: 32px; /* 避开固定导航栏，高度与导航栏一致 */
    width: 100%;
    padding: 1rem 0; /* 上下固定间距，可根据需求调整数值 */
    box-sizing: border-box; /* 确保padding不会增加容器宽度 */
}

.custom-header img {
    width: 100%;
    height: auto; /* 自动维持图片宽高比 */
    display: block; /* 移除图片底部的默认行间距 */
}

方法二：保留背景图片（需计算图片比例） #

若必须使用背景图片，需通过内边距百分比维持图片的宽高比，避免截断或扭曲。

步骤说明 #

1. 计算图片的宽高比：(图片高度 / 图片宽度) × 100%，得到容器的 padding-top 值（示例图片比例为 250/1200 ≈ 20.83%）。
2. 使用嵌套容器实现背景图片自适应，外层容器控制间距。

修改后的代码 #

HTML

<nav class="nav-primary"></nav>

<header class="custom-header">
  <div class="header-bg"></div>
</header>

CSS

.nav-primary {
    background-color: #222;
    color: #fff;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    height: 32px;
}

.custom-header {
    margin-top: 32px; /* 避开固定导航栏 */
    width: 100%;
    padding: 1rem 0; /* 上下固定间距 */
    box-sizing: border-box;
}

.header-bg {
    background-image: url('https://i.ibb.co/SwSktxv/desktop.png');
    background-size: 100% auto; /* 图片占满容器宽度，自动调整高度 */
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    padding-top: 20.83%; /* 根据图片实际比例调整 */
}

关键要点 #

• 固定导航栏适配：通过 margin-top:32px 确保头部内容不会被固定导航遮挡。
• 一致间距：外层容器的 padding:1rem 0 保持图片上下间距在所有屏幕尺寸下一致。
• 自适应缩放：width:100% + height:auto（或背景图的 background-size:100% auto）确保图片随屏幕宽度缩放，维持原始比例，文本完整显示。

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