不知大家在做前端页面的时候，有没有遇到类似这样的问题：有一个不是正方形的图片，可能是宽度大于高度的，也可能是高度大于宽度的，而你又并不想用背景图的方式来做，要实现用img标签来让此图片显示出一个正方形的且不变形的效果。即如下图：只显示图片中间部分（红框部分）
下面我们便来简单讨论如何实现让长方形图片显示出正方形的效果，首先我们本次讨论中用到的两张图片的原图就是上面的两张图片（一张宽度大于高度，另一张高度大于宽度）
1、背景图显示正方形效果的做法首先还是从背景图的做法说起，遇到类似的问题，我们大部分人首先想到的是，能用背景图片做的话，就直接用背景图片来做了，至少我是这么想的。那么用背景图的方式是怎么做的，代码还是写一下如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>背景图的做法</title> <style> .bg-img1 { width: 200px; height: 200px; background: url("images/img1.jpg") center; background-size: contain; } .bg-img2 { width: 200px; height: 200px; background: url("images/img2.jpg") center; background-size: cover; } </style> </head> <body> <h3>背景图的做法</h3> <div class="bg-img1"></div> <br> <div class="bg-img2"></div> </body> </html>