Responsive Circular Images

Question

I am currently working on creating a dynamic style sheet for myself, which I will use in the future, and therefore I want it to be dynamic, not rigid.

I have an image class:

.image-round{ border-radius: 50%; } 

This class works fine for all square images, but when I try to use rectangular images, I get an oval.

I tried to get around this using jQuery, wrapping the image in the container that I made, overflowing hidden and setting its height and width equal to the height of the image. This solved the problem, however now I am facing responsive issues.

When I try to scale the window down, the image becomes scratchy.

Now I wonder if there is a solution to solve this problem completely dynamically, without hard coding what ever, creating images in the landscape, as well as around the circle around .

I really want to avoid checking the image size when resizing the window, and then resizing the containers - since I am sure this will require a lot of performance.

Also, you cannot use a background image.

Answer 1

You can make all the images round by wrapping the images in a div and

• maintain aspect ratio as square (for several methods for maintaining aspect ratio div see here )
• apply border radius and overflow:hidden; on the wrapper.

This will prevent the images from being displayed at the oval level.

Then the problem is to process all proportions of the image, landscape and portrait , so that they are centered and "cover" the container. To do this, you can use the object fill property as follows:

 div{ position:relative; width:20%; padding-bottom:20%; border-radius:50%; overflow:hidden; } img{ position:absolute; object-fit: cover; width:100%;height:100%; } 

 <div><img src="http://i.imgur.com/uuEyxxE.jpg" /></div> <div><img src="http://i.imgur.com/HDssntn.jpg" /></div> 

The disadvantage is that IE does not support object-fill . So you need a backup to handle two cases:

• landscape images limit image size from height
• portrait images limit image size to width

 div{ position:relative; width:20%; padding-bottom:20%; border-radius:50%; overflow:hidden; } img{ position:absolute; margin:auto; } .landscape img{ height:100%; left:-100%; right:-100%; } .portrait img{ width:100%; top:-100%; bottom:-100%; } 

 <div class="landscape"><img src="http://i.imgur.com/uuEyxxE.jpg" /></div> <div class="portrait"><img src="http://i.imgur.com/HDssntn.jpg" /></div> 

In this configuration, you will need JS to define landscape or portrait images and their style accordingly.