如何固定图片高度并拉伸至全宽且不改变其长宽比

开发者阿泽

2026-10-15

问题原因

你原有代码的问题是同时给<img>设置了width: 100%和height: 100%，会强制拉伸图片适配容器尺寸，直接破坏原始长宽比例。
以下是两种可直接落地的实现方案：

方案1：img标签实现（SEO友好）

保留你现有的HTML结构，修改CSS即可：

/* 轮播容器 */
div {
  width: 100%; /* 撑满父容器宽度，要占满全屏可以换成100vw */
  height: 780px;
  background-color: #f5f5f5; /* 侧边填充的背景色，可根据网站风格调整 */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

div img {
  height: 100%;
  width: auto; /* 宽度自动适配，保持原始长宽比 */
  /* 如果需要铺满容器、裁剪超出部分的效果，替换为以下两行：
  width: 100%;
  object-fit: cover;
  object-position: center;
  */
}

方案2：背景图实现（适配更灵活）

直接把图片设为容器背景，不用额外写img标签：

div {
  width: 100%;
  height: 780px;
  background-color: #f5f5f5;
  background-image: url('你的轮播图地址');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: auto 100%; /* 高度100%适配容器，宽度自动保持比例 */
  /* 如果需要铺满容器、裁剪超出部分的效果，把background-size改为cover即可 */
}