HTML怎么让图片不变形_设置图片填充模式代码【实操】-html教程-PHP中文网

img标签默认拉伸变形，需用object-fit控制填充方式：cover等比裁剪、contain等比留白、fill强制变形；须配合width/height和display:block生效，ie需background-image或polyfill降级。

html怎么让图片不变形_设置图片填充模式代码【实操】

img 标签默认拉伸会变形，用 object-fit 解决

HTML 中直接写 <img src="x.jpg"> 时，如果宽高固定（比如设了 width: 200px; height: 150px;），浏览器会强行拉伸图片填满，导致胖瘦失真。这不是 bug，是 img 的默认行为 —— 它只负责“载入并铺满”，不关心比例。

真正控制填充方式的是 CSS 的 object-fit 属性，它专为替换元素（<img>、<video></video>）设计，类似背景图的 background-size，但作用对象不同。

常用值和效果：

object-fit: cover;：等比缩放，裁剪溢出部分（最常用，类似「封面图」）
object-fit: contain;：等比缩放，完整显示，留白（适合证件照、图标）
object-fit: fill;：强制拉满，必变形（就是默认行为，慎用）
object-fit: scale-down;：取 none 和 contain 中更小的尺寸，适合不确定原始尺寸的场景

必须配合 width/height + display: block 才生效

object-fit 不是独立起效的魔法属性。它只在元素有明确渲染尺寸（即设置了宽高）且是块级或行内块级时才起作用。常见失效原因：

只写了 object-fit: cover;，但没设 width 和 height → 无效
父容器用 flex 布局，子 <img> 没设宽高，靠 flex 自动撑开 → object-fit 不触发
img 是行内元素，默认有基线间隙，可能造成底部多出空白 → 需加 display: block;

正确写法示例：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

<div class="avatar">
  @@##@@
</div>

.avatar {
  width: 100px;
  height: 100px;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

IE 不支持 object-fit，需要 fallback 方案

IE 11 及以下完全不识别 object-fit。如果你的项目仍需兼容 IE，不能只靠 CSS。两种务实方案：

用 background-image 替代 <img src="head.jpg" alt="头像">：把图片转成 div 的背景，用 background-size: cover 实现同样效果（但牺牲了 alt 文本、SEO 和懒加载能力）
用 JS 库补丁，如 object-fit-images：轻量（~2KB），自动为不支持的浏览器注入 polyfill，调用方式简单：objectFitImages();

注意：不要用 img + background-size 混搭，那没意义 —— background-size 对 <img> 元素本身不起作用。