crop and center image by css

Question

I have multiple images which have a size of 2000px by 2000px. I want to put them into square 500px by 500px. And I want to crop the images so that about 10% of the image at each border would not be visible. (Like taking 80% by 80% of the picture at the center)

How do I do that? The solution below would crop the image too much.

background-position: center center;

How to automatically crop and center an image

@G.L.P You can find the code of my website here. [link](http://expfood.ru). For this you need to click on reactangular image on the right to see items. And then on any item's image (such as bananas). The bigger image is the one I am talking about. — saasdf, Aug 21 '15 at 08:00

score 0 · Answer 1 · answered Aug 20 '15 at 04:57

Try this.Example

Use div for this

<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;    
    }

crop and center image by css

1 Answers1