一种解决方案是使用以元素大小为裁剪尺寸的元素为中心的背景图像。
基本例子
.center-cropped { width: 100px; height: 100px; background-position: center center; background-repeat: no-repeat;}<div ></div>img标签示例
此版本保留了
img标签，因此我们不会丢失拖动或右键单击以保存图像的功能。信贷帕克贝内特不透明度伎俩。
.center-cropped { width: 100px; height: 100px; background-position: center center; background-repeat: no-repeat; overflow: hidden;}.center-cropped img { min-height: 100%; min-width: 100%; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); opacity: 0;}<div > <img src="http://placehold.it/200x200" /></div>object-fit/
-position
请参阅支持的浏览器 。
的CSS3图像规范定义
object-fit和
object-position属性，它们一起允许对规模更大的控制和一个的图像内容的位置
img元素。有了这些，就有可能达到预期的效果：
.center-cropped { object-fit: none; object-position: center; height: 100px; width: 100px;}<img src="http://placehold.it/200x200" />
