用CSS轻松调整图片大小，避免拉伸和变形

图片是网页内容中不可或缺的一部分——它们丰富了视觉效果，吸引用户目光，有时胜过文字的表达力。但如果图片尺寸过大或缩放不当，特别是在响应式设计中，很容易破坏整体布局。

你是否也见过某篇设计精美的博客由于图片被拉伸或压缩而显得怪异？你并不孤单。

实则，只需几行CSS代码，就能轻松解决这个问题，无需插件，无需手动调整，更不会破坏图片的宽高比。

本文将教你如何用CSS正确调整图片尺寸，保持比例，并确保图片在各种屏幕尺寸下都能完美展示。我们马上开始吧！

为什么不要直接在 标签里写死宽高？

先来提醒一句：

如果你用过这样的写法：

<img src="photo.jpg" width="300" height="200" />

祝贺你，你用错了方法。

同时硬编码宽度和高度会强制图片变成固定尺寸，忽略了原始比例。

结果就是脸部被压扁、猫咪被拉长，各种搞笑变形。

正确的做法：交给CSS和浏览器去处理

假设你想让图片宽度最大为200px，高度自动调整保持比例：

.resize-width {
  width: 200px;
  height: auto;
}

HTML写法：

<img src="myphoto.jpg" class="resize-width" alt="我的照片">

这样，图片宽度限制在200px，高度会根据原始比例自动适配，不会变形。

想设置固定高度？

如果你想固定高度为300px，宽度按比例缩放，做法很简单：

.resize-height {
  width: auto;
  height: 300px;
}

HTML：

<img src="landscape.jpg" class="resize-height" alt="秀丽景色">

同样，图片不会变形，而是完美缩放。

响应式图片，适配所有屏幕

做现代响应式网站（必须的！）时，图片也要灵活缩放适配手机和平板。

用这段更通用的写法：

.img-responsive {
  max-width: 100%;
  height: auto;
}

这告知浏览器：

用法示例：

<img src="myphoto.jpg" class="img-responsive" alt="我的照片">

这段CSS几乎是每个项目的必备，博客、作品集、电商网站都能保证图片优雅呈现。

配合 object-fit 实现裁剪和填充

有时候你希望图片放进固定大小的容器（列如卡片或div），但仍想保持图片比例。

object-fit 就是为此而生：

.image-box {
  width: 300px;
  height: 200px;
  object-fit: cover;
}

HTML写法：

<img src="header.jpg" class="image-box" alt="页头图片">

object-fit: cover 会让图片填满容器，必要时裁剪超出部分，但不拉伸变形。

其他有用的值：

小结

下次上传图片或写 标签时，别急着写死宽高。

只需赋予合适的CSS类，让浏览器帮你智能调整尺寸，保证图片比例不变，布局自然优雅。

这就是用CSS轻松控制图片大小且不失真的秘诀！