裁剪和中心图像由css

Question

我有多张图像，大小分别为2000像素×2000像素。我想把它们放到500px到500px的正方形中。我想裁剪图像，以便每个边框的大约10％的图像不可见。 （比如占据中心80％的80％）

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

background-position：center 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;    
    }