图片是网页内容中不可或缺的一部分——它们丰富了视觉效果，吸引用户目光，有时胜过文字的表达力。但如果图片尺寸过大或缩放不当，特别是在响应式设计中，很容易破坏整体布局。
你是否也见过某篇设计精美的博客因为图片被拉伸或压缩而显得怪异？你并不孤单。
其实，只需几行CSS代码，就能轻松解决这个问题，无需插件，无需手动调整，更不会破坏图片的宽高比。
本文将教你如何用CSS正确调整图片尺寸，保持比例，并确保图片在各种屏幕尺寸下都能完美展示。我们马上开始吧！
为什么不要直接在<img>标签里写死宽高？
先来提醒一句：
如果你用过这样的写法：
<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 会让图片填满容器，必要时裁剪超出部分，但不拉伸变形。
其他有用的值：
contain—— 图片完整显示，可能留空白，不裁剪fill—— 拉伸图片填满容器（通常不推荐）
小结
下次上传图片或写<img>标签时，别急着写死宽高。
只需赋予合适的CSS类，让浏览器帮你智能调整尺寸，保证图片比例不变，布局自然优雅。
優(yōu)網(wǎng)科技秉承"專(zhuān)業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營(yíng)理念，誠(chéng)信務(wù)實(shí)的服務(wù)了近萬(wàn)家客戶，成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長(zhǎng)期合作伙伴！
優(yōu)網(wǎng)科技成立于2001年，擅長(zhǎng)網(wǎng)站建設(shè)、網(wǎng)站與各類(lèi)業(yè)務(wù)系統(tǒng)深度整合，致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)（品牌展示型、官方門(mén)戶型、營(yíng)銷(xiāo)商務(wù)型、電子商務(wù)型、信息門(mén)戶型、微信小程序定制開(kāi)發(fā)、移動(dòng)端應(yīng)用（手機(jī)站、APP開(kāi)發(fā)）、微信定制開(kāi)發(fā)（微信官網(wǎng)、微信商城、企業(yè)微信）等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。
公安局備案號(hào)：
專(zhuān)屬顧問(wèn)
