响应式网页图片拉伸问题及CSS背景上层盒子实现咨询

一、修复logo图片拉伸变形问题 #

你的img标签存在两个明显问题：一是重复定义了style属性（HTML单个标签不允许重复同属性），二是height拼写错误成了hight，这两点直接导致图片比例失控。可以用以下两种方式解决：

方法1：用object-fit强制保持比例 #

这种方式能让图片在容器内按原始比例缩放，可选不同规则适配显示需求：

<img src="/logo.png" 
     width="400" 
     height="125"
     style="width: 100%; height: auto; object-fit: contain;" />

• object-fit: contain：图片完整显示，容器内剩余空间留空白
• object-fit: cover：图片填满容器，超出部分自动裁剪，全程保持比例

方法2：仅设置宽度，让高度自动适配 #

去掉冗余属性，只限制宽度并让浏览器自动计算高度，完全遵循图片原始比例：

<img src="/logo.png" 
     style="width: 100%; max-width: 400px; height: auto;" />

添加max-width: 400px是为了避免图片在超大屏幕上被拉伸到超过原始尺寸，保证logo清晰度。

二、实现背景上方盒子的填充效果 #

margin是盒子外部的间距，border是边框样式，要实现盒子内部内容与边框的间距或者背景与内部盒子的间距，需要用padding属性，同时建议开启box-sizing: border-box避免padding撑大盒子整体尺寸。

假设你的基础结构是这样的：

<div class="bg-wrap">
  <div class="inner-box">
    <!-- 这里放你的内容 -->
  </div>
</div>

对应的CSS写法：

.bg-wrap {
  background: #你的背景样式;
  padding: 20px; /* 这就是背景和内部盒子之间的填充间距 */
}

.inner-box {
  background: #fff; /* 盒子自身背景色 */
  padding: 15px; /* 盒子内部内容与边框的间距 */
  box-sizing: border-box; /* 让padding不会额外增加盒子的总宽度 */
}

如果不需要额外嵌套盒子，直接给背景容器加padding也能实现内部填充效果：

.bg-wrap {
  background: #你的背景样式;
  padding: 30px;
  box-sizing: border-box;
}

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