CSS Question

How to fill larger image into smaller div?

I want to put 1/3 larger image into a smaller div and rectangle is centering but I don't know how to fill in.

Here is an example:
jsfiddle

HTML:

<div class='outer'>
<img src='http://www.clker.com/cliparts/3/R/3/7/W/R/orange-vertical-rectangle-hi.png' />
</div>


CSS:

*{
margin : 0;
padding : 0;
}
body{
background-color: grey;
}
.outer{
width : 200px;
height : 200px;
overflow : hidden;
border-radius : 50%;
background-color : black;
margin : auto;
}
img{
position:absolute;
z-index : -1;
margin-left : -25%;
}


I just want upper 1/3 of orange rectangle into the outer div, and the rest of rectangle is hidden. In my example, i put the background-color to outer div for easier recognize.

Answer

Only Remove position: absolute; in img class

Update css

img{
  z-index : -1;
  margin-left : -25%;
}

Live Demo Here

Snippet Example Below

*{
  margin : 0;
  padding : 0;
}
body{
  background-color: grey;
}
.outer{
  width : 200px;
  height : 200px;
  overflow : hidden;
  border-radius : 50%;
  background-color : black;
  margin : auto;
}
img{
  z-index : -1;
  margin-left : -25%;
}
<div class='outer'>
   <img src='http://www.clker.com/cliparts/3/R/3/7/W/R/orange-vertical-rectangle-hi.png' />
</div>