Responsive circular images

Question

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

I have an image class:

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

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

I tried getting around this by using jQuery, wrapping the image in a container, that I made have overflow hidden and set its height and width to be 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 squished.

Now I wonder if there is a solution to solve this problem entirely dynamically, with no hard coding what so ever, making images in landscape as well as portrait round.

I really want to avoid having to check the images size on window resize, and then readjusting the containers size - as I am pretty sure this will take a lot of performance.

It is also not an option to use background image.

I have already included the snippet of my class. Please refer to the code block in my question. — user3385205, Feb 11 '16 at 10:23
Which is why I instead included a neat, understandable and easy to read description of what my efforts were. I did this to not have to include large amounts of code in my small question. - If it is really necessary, I can include my jQuery and css that I tried with, however these were simply silly experiments. I did not find i had to include code that did not work to explain what I did wrong. I am pretty sure i have explained my question fine, and I am looking for an answer not for anyone to look at meaningless, wrong and unuseable code that would in no way help answer the question any better. — user3385205, Feb 11 '16 at 10:26
I think you need to compromise on something either get the whole image maintaining the aspect ratio and inside the image will have a little blank space, else you can use background size as cover to not display any blank spaces. I think you mentioned not as background image. But I cant see how else — joyBlanks, Feb 11 '16 at 10:34

score 5 · Accepted Answer · edited May 23 '17 at 10:33

5

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

maintain its aspect ratio to be square (for several techniques to maintain the aspect ratio of a div see here)
apply the border-radius and overflow:hidden; on the wrapper.

This will prevent the images to be displayed oval.

Then the issue is handling every image aspect ratio, landscape and portrait so they are centered and "cover" the container. For that you can use the object-fill property like this:

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 drawback is that IE doesn't support object-fill. So you need a fallback to handle two cases :

landscape images limit the size of image from height
portrait images limit the size of image from 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 identify landscape or portrait images and style them accordingly.

edited May 23 '17 at 10:33

Community

1
1

answered Feb 11 '16 at 10:32

web-tiki

99,765
32
217
249

There are two issues with this. The first being the lack of browser support, and the second being that it resizes too early. I want the image to start resizing only when the edges of the window hit the image, like any other responsive element. - Thanks for the answer though. – user3385205 Feb 11 '16 at 10:34
@user3385205 I am writing a fallback for browser support. For the responsiveness, I believe you are missunderstanding, the images are responsive according to wdith of wrapper so you can put it inside any element that resizes how you desire (with breakpoints for *adaptive design* or with viewport width for *responsive design*) – web-tiki Feb 11 '16 at 10:37
Would i simply then check with javascript if i am to apply either portrait or landscape class, becuase as i said, i need it to be dynamic and work on its own. – user3385205 Feb 11 '16 at 10:43
Yes @user3385205 as other than object-fill, there is no css only method to make an image behave like a background-image with `background-size:cover` – web-tiki Feb 11 '16 at 10:47
Thank you. I am thinking that for my case, it would be better to simply always have that div to 100% width and 100% padding, and then wrap it in another div that i would change the dimensions of. Marking this as correct answer for now - i might find a bug later. – user3385205 Feb 11 '16 at 10:50
And just a follow-up question. What would i do to make sure my image never gets past its natural dimensions? I don't want it to be bigger than its original size. I tried taking the width and height of the image and setting the max width and height on the container equal to that. Problem is the padding then screws me over by squishing it. – user3385205 Feb 11 '16 at 11:27
@user3385205 that is an issue that will be hard to handle with the padding-bottom technique to maintain the aspect ratio of the container. You can use max-width/height if you use the viewport related units to maintain the aspect ratio (see second answer in the question I linked). – web-tiki Feb 11 '16 at 11:36

Responsive circular images

1 Answers1