[Resolved] Image to fill in header properly

[William]

Hi there,

On this page, I aim to have images of poets in a circle. Depending on the image dimensions, this can seemingly get cropped such as in this example.

This is how it should look.

Is there a way to make sure no matter what the image dimensions are, it will always make sure it zooms/ object: cover so that it is always a circle in its viewability?

[Leo]

Hi there,

I don’t think so.

The images should be a perfect square shape so you can just use border-radius.

More info here:
https://www.w3schools.com/howto/howto_css_rounded_images.asp

There is also an example here but it’s using CSS to set the image to be a square first as well:
https://medium.com/@biancapower/how-to-make-a-rectangle-image-a-circle-in-css-2f392bc9abd3

[William]

So making sure that image is always square before uploading is the way around this?

It’s just that the image in the circle here is not square but still looks okay? I don’t mind if details are lost from filling etc., just it does not look the best on this page at the moment.

[Ying]

This is how the CSS work to make the image round.
https://www.screencast.com/t/7oXhDxGzZt
https://www.screencast.com/t/txYQsqmfY

As you can see, the CSS shapes the vertical image to square first by limiting its size to 160px by 160px, then add border radius to make it round.

But the CSS doesn’t work for the landscape image, when the width reaches 160px, the height is not enough to reach 160px if the ratio remains.

That’s why square image is preferred, you can crop it yourself instead of letting CSS crop for you.

[William]

Okay gotcha – I’ll crop the image before upload – thanks for making that super easy to understand!

[Ying]

No problem William 🙂

[Author]

Posts