HTML+CSS实现图片固定宽度不拉伸

可以通过以下步骤实现图片固定宽度、不拉伸且超出部分隐藏的效果：

<div class="image-container">
  <img src="your-image.jpg" alt="示例图片">
</div>

.image-container {
  width: 300px;         /* 固定容器宽度 */
  height: 200px;        /* 固定容器高度 */
  overflow: hidden;     /* 隐藏超出部分 */
  position: relative;   /* 为图片定位提供参照 */

  /* 可选 - 增加样式修饰 */
  border: 1px solid #ddd;
  border-radius: 4px;
}

.image-container img {
  width: 100%;          /* 宽度撑满容器 */
  height: 100%;         /* 高度撑满容器 */
  object-fit: cover;    /* 保持比例填满容器，多余部分裁剪 */
  object-position: center; /* 裁剪时保持居中（默认值可不写） */
  
  /* 如果需要图片水平/垂直偏移裁剪位置 */
  /* object-position: 20% 50%; */
}

关键点解释：

1. 容器设置

• 固定尺寸容器：通过 width 和 height 确定显示区域

• overflow: hidden：隐藏超出容器的图像部分

2. 图片设置

• width: 100% 和 height: 100%：让图片充满容器

• object-fit: cover：核心属性，保持图片原始比例，并裁剪多余部分

• object-position：控制裁剪时的焦点位置（默认居中）

效果说明：

• 图片会按原始比例缩放，直至完全覆盖容器

• 图片的短边会被裁剪，保留中间部分（可通过 object-position 调整）

• 容器始终保持设定的固定尺寸

• 支持所有现代浏览器（IE11 需要 polyfill）

扩展方案：背景图实现法

如果不介意使用背景图，也可以这样实现：

<div class="bg-image-container"></div>

.bg-image-container {
  width: 300px;
  height: 200px;
  background-image: url("your-image.jpg");
  background-size: cover;       /* 等效 object-fit: cover */
  background-position: center; /* 等效 object-position */
  background-repeat: no-repeat;
}

两种方式效果相似，根据是否需要 SEO 优化/图片可访问性选择即可。使用 <img> 标签对搜索引擎更友好。