如何自动裁剪和居中图像

如何自动裁剪和居中图像

一种解决方案是使用以元素大小为裁剪尺寸的元素为中心的背景图像。

---

基本例子

.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" />