最近项目改版，需要在方框区域显示图片，因为老数据是横长方形图片，老数据不能丢弃，产品是要求把这种图片两边都剪掉，只在方框里展示图片中间的（鸡蛋）。经过一番尝试，一共找到了3个可以成功实现的方法，在此分享一下。原图如下，结果如下1.使用绝对定位+transform的方法已经被广泛使用，使指定元素在盒子中上下左右居中，也适用于场景上方2。使用display:flex属性。不得不说flex很强大。设置display:flex后，可以简单的设置justify-content和align-items来指定内部元素的展示方式，不需要做任何计算。3.大尺度负margin不得不说最后一个方法略显怪异，一般margin:0-100%;足够了，但是在实际使用过程中，有时会发现无效。怀疑是图片、框和屏幕宽度的比例有关系，所以设置为-300%，设置为-300%后一切正常。html部分如下我用的是绝对定位+transform
