html - 如何居中裁剪宽度较大的高清图像

Question

我正在使用它来裁剪，但这对于较宽的图像无法正常工作，但对于那些高度更大的图像来说效果很好。

 border:1px solid black;
 background: url(http://www.hdwallpaper201.com/wp-content/uploads/2014/11/Rajnikanth-Sketch-HD-Photo.jpg) no-repeat scroll center center / 100% auto transparent;
 height: 200px;
 width: 200px;
 left: 717px;
 top: 646px;
 z-index: auto;

Fiddle Link

Answer 1

你可以使用background-size: cover

.bg {
 border:1px solid black;
 background: url(http://www.hdwallpaper201.com/wp-content/uploads/2014/11/Rajnikanth-Sketch-HD-Photo.jpg) no-repeat scroll center center / 100% auto transparent;
 background-size: cover;
 height: 200px;
 width: 200px;
 left: 717px;
 top: 646px;
 z-index: auto;
}

<div class="bg"></div>