I have a div block with height and width of 55px and border-radius: 100%; and I want for an image inside, but if the image is rectangular and I leave it with border-radius: 100%; she is oval!
You have how the div overlays the image and covers the part outside the circle like this:
Eveniftheimageishalfrectangular,withoutdistortingit?Iunderstandthatthedivmustoverlaptheimage,notfinalizingitlikethis:
Thanks in advance!
Considering that the dimensions of the image will always be the same, try the following:
.img-arredondada {
border-radius: 50%;
background-position: -15px -15px;
height: 195px;
width: 195px;
}<div class="img-arredondada" style="background-image: url(http://i.stack.imgur.com/AyzfI.jpg)"></div> The border-radius leaves rounded.
The background-position ignores the upper range, starting the image where it matters.
The height together with the width ignore the lower range, ending the image at the right point.
Setting the overflow of div as hidden can do this without using the image as background.
If the image does not fit proportionally in div set a background color so the image is not cropped
.round {
border-radius: 100%;
overflow: hidden;
height: 100px;
width:100px;
background: black;
}
img {
width: 100%;
}<div class="round">
<img src="http://www.wingspan.co.nz/images/raptor.jpg" />
</div>