使用 object-fit: cover 和 object-position: center 可使图片等比缩放、居中裁剪并填满容器，配合固定或响应式容器尺寸及 overflow: hidden 实现无变形显示。

用 CSS 的 object-fit 和 object-position 配合容器尺寸控制，就能让图片自动缩放并始终居中显示，不拉伸、不变形。

设置容器固定宽高 + overflow: hidden

先给图片的父容器设定明确的宽高（比如 300×200 像素），并设 overflow: hidden，防止缩放后溢出：

.img-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

图片使用 object-fit: cover + object-position: center

对 <img> 标签应用以下样式：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• object-fit: cover —— 等比缩放图片，填满容器，多余部分裁剪
• object-position: center —— 确保裁剪时以图片中心为基准，视觉上始终居中
• 去掉默认的 display: inline 影响，加 display: block 避免底部留白

.img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

兼容性与备选方案

现代浏览器（Chrome 32+、Firefox 36+、Safari 10.1+、Edge 16+）都支持 object-fit。如需兼容老版 IE，可用背景图方式替代：

• 把图片设为容器的 background-image
• 用 background-size: cover 和 background-position: center
• 注意此时图片无法被屏幕阅读器识别，SEO 和可访问性会下降

响应式场景下更灵活的写法

如果容器本身是响应式的（比如最大宽度 100%），可以这样写：

.responsive-img {
  width: 100%;
  max-width: 400px;
  aspect-ratio: 4 / 3; /* 可选：保持宽高比 */
  overflow: hidden;
}
.responsive-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！