如何放大图片并保证宽高比不变？

核心就是一句话只控制一个方向另一个方向自动计算。比如只设置widthheight: auto或只设置heightwidth: auto这样图片放大时就不会变形。一、最常见写法1. 按宽度放大img srctest.jpg classimg /.img { width: 400px; height: auto; }表示宽度变成400px高度自动按原比例缩放2. 按高度放大.img { height: 300px; width: auto; }表示高度变成300px宽度自动按比例缩放二、响应式场景常用写法如果你希望图片随容器变大但比例不变.img { max-width: 100%; height: auto; }这个非常常见表示图片最大不超过容器宽度高度自动缩放不会变形三、如果是固定容器内等比显示有时候不是直接放大图片而是图片放在一个固定大小的盒子里这时要看你的需求。1. 完整显示图片不裁剪div classbox img srctest.jpg classimg / /div.box { width: 400px; height: 300px; border: 1px solid #ccc; } .img { width: 100%; height: 100%; object-fit: contain; }作用图片会尽量放大保持宽高比完整显示可能会留白2. 铺满容器可能裁剪.img { width: 100%; height: 100%; object-fit: cover; }作用图片保持比例铺满整个容器多余部分会被裁掉不会变形四、如果是 hover 放大但不变形比如鼠标移入图片时放大div classimg-wrap img srctest.jpg classimg / /div.img-wrap { width: 300px; overflow: hidden; } .img { width: 100%; height: auto; transition: transform 0.3s; } .img:hover { transform: scale(1.2); }原理scale(1.2)是等比缩放所以天然不会破坏宽高比。五、JS 动态放大如果你想通过 JS 修改大小const img document.querySelector(img) img.style.width 500px img.style.height auto或者按比例缩放img.style.transform scale(1.5)六、为什么图片会变形通常是因为你同时写死了width: 400px; height: 400px;如果原图不是正方形就会被拉伸变形。例如原图比例是800 × 400宽高比是2:1你强行设置成400 × 400就会变形。七、面试回答版放大图片并保持宽高比不变通常只设置一个维度另一个维度设为auto比如width: 400px; height: auto;。如果图片要在固定容器中显示可以使用object-fit: contain或object-fit: cover来保证比例不变。若是做交互放大也可以用transform: scale()它会按比例缩放不会变形。八、几种场景总结普通等比放大img { width: 400px; height: auto; }自适应容器img { max-width: 100%; height: auto; }固定盒子内完整显示img { width: 100%; height: 100%; object-fit: contain; }固定盒子内铺满img { width: 100%; height: 100%; object-fit: cover; }hover 等比放大img:hover { transform: scale(1.2); }九、一句话总结想让图片放大不变形就只控制宽或高中的一个另一个设为auto或者用transform: scale()/object-fit保持比例。