- This topic has 5 replies, 3 voices, and was last updated 5 years, 1 month ago by
.
-
Posts
-
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?
Customer Support
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.aspThere 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-2f392bc9abd3Customer Support
This is how the CSS work to make the image round.
https://www.screencast.com/t/7oXhDxGzZt
https://www.screencast.com/t/txYQsqmfYAs 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 🙂
- You must be logged in to reply to this topic.
