Archived topic
Image to fill in header properly
5 replies · Started by William on February 7, 2021
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.
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?
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
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.
Okay gotcha - I'll crop the image before upload - thanks for making that super easy to understand!
No problem William :)
