There is a picture 400x200px. It is necessary to round it, the width and height should be equal to 60px. The image should not be stretched in height, in this case it is stretched ( <div><img src="1.png"></div>

 div { width: 60px; height: 60px; } img { width: 100%; height: 100%; border-radius: 50px; }
  • in which plan to narrow? at the size of the picture relative to the div border-radius enclosed in it should not be more than 30 for this is a circle it turns out - Pavel

1 answer 1

If the background-image with background-size:cover not enough and it is img that is needed, you can do this:

 div { position: relative; overflow: hidden; border-radius: 50%; width: 60px; height: 60px; } div img { position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } 
 <div> <img src="https://placekitten.com/400/200"> </div>

Unfortunately, styles will work only for horizontal images (like 400 × 200), for vertical ones you will need to swap auto and 100% for width and height . I do not know if it is fixable.

Just in case, the version with background-size:cover :

 div { border-radius: 50%; width: 60px; height: 60px; background: url("https://placekitten.com/400/200") no-repeat center center; background-size: cover; } 
 <div></div>