html - 通过 css 裁剪和居中图像

Question

我有多个大小为 2000 像素 x 2000 像素的图像。我想把它们放到 500px x 500px 的正方形中。我想裁剪图像，使每个边界处大约 10% 的图像不可见。 (就像在中心拍摄 80% x 80% 的图片)

我该怎么做？下面的解决方案会过度裁剪图像。

background-position: center 中心;

How to automatically crop and center an image

Answer 1

试试这个。例子

为此使用 div

<div >
 <img src="" ></img>

 </div>

CSS

   div{

    position:absolute
    Height:500px;
    width:400px;

    }

 img{
     position:relative;
    Height:300px;//give some width n height to image
    width:200px;
   margin:10px;    
    }