在开发项目过程中，客户希望图片不变形显示，最初我们的结局方案是通过js技术来达到效果，今天前端哥分享一个使用css即可让图片不变形处理方式，代码也非常简洁
上干货（上代码）：
img { width: 100%; height: 100%; object-fit: cover;}
完整实例代码：
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>前端哥——纯css使图片不变形显示</title> <style> * { box-sizing: border-box;} HTML,body { width: 100%;height: 100%;margin: 0px 0px;padding: 0px 0px;} .img-box { width: 300px; height: 180px; margin-left: 25%; margin-top: 10%; overflow: hidden;} .img-box img { width: 100%; height: 100%; object-fit: cover;} </style> </head> <body> <div class="img-box"> <img src="https://www.qianduange.cn/upload/coverImage/1672649324.jpg" alt="前端哥项目演示" /> </div> </body></html>
