为什么图片一拉就变形？
很多人在处理图片时都遇到过这种情况：想把一张小图放大放到网页上，结果一拖拽，人脸被拉成了长条，圆形变成了椭圆。问题出在哪？其实就是没掌握“等比缩放”的原则。图片的宽高比一旦被打破，内容就会失真。
保持比例的快捷操作
在大多数图像编辑软件里，比如Photoshop、Paint.NET或者在线工具Canva，都有一个隐藏但好用的功能——按住 Shift 键再拖动角落的控制点，就能锁定宽高比。这样无论放大缩小，图像都不会被压扁或拉长。
如果你用的是Windows自带的“照片”应用，点击“裁剪”后选择“锁定宽高比”，也可以手动输入1:1、4:3、16:9这类常见比例，避免自由拉伸导致变形。
CSS中如何防止网页图片变形
做网页时更要注意这个问题。直接给标签设置固定宽高很容易让图片扭曲。更好的方式是用CSS控制：
<img src="example.jpg" class="responsive-img">
<style>
.responsive-img {
max-width: 100%;
height: auto;
}
</style>这样图片会根据容器自动调整大小，同时保持原始比例。max-width保证不会溢出，height:auto则是关键，它告诉浏览器高度随宽度等比变化。
使用背景图时的小窍门
有时候你把图片设为div的背景，却发现它被拉伸得不像样。这时候可以用background-size属性：
<style>
.bg-cover {
background-image: url('hero.jpg');
background-size: cover;
background-position: center;
width: 100%;
height: 300px;
}
</style>background-size: cover 会让图片等比缩放并填满整个区域，多余部分会被裁剪；而 contain 则确保整张图完整显示，适合LOGO或图标场景。
批量处理别忘了约束比例
如果你用工具批量压缩或转换图片，比如IrfanView或XnConvert，记得在设置尺寸时勾选“保持纵横比”或“锁定比例”。否则几百张图导出来全走形，返工可就麻烦了。
手机截图怎么适配不同屏幕
做教程文档时经常要插入手机截图，但不同型号屏幕比例不一样。建议先把截图放进一个带边框的手机模型图里，而不是直接拉大原图。很多PPT模板和Figma组件都提供这种现成框架，既美观又不会变形。
换个思路：裁剪比拉伸更好
实在需要填充特定区域时，与其强行拉伸，不如提前裁剪。比如要做微信封面图，直接按9:5的比例裁好原图，再放入页面，视觉效果干净利落。很多社交平台都有推荐尺寸提示，照着做基本不会出错。