How do you set proportional border-widths based on image size?
Codepen: https://codepen.io/nathanchase/pen/QWovJRx
I'm trying to make it so that the border is the same approximate width proportional to the size of the image, so a smaller image will have a smaller border width, and a larger image will have a larger border width.
I thought setting a
container: inline-size on a parent element and using cqi units on the border-width would work, but it doesn't seem to.
What am I missing here?
7 Replies
I also tried using clamp, min, max... I couldn't find any solution that worked. Perhaps it's not possible in CSS alone? I could use JS to find the image width and set the border-width dynamically, but it seems like this is something CSS should be able to accomplish.
You're idea works, but you need to use
container-type and not container. container is a shorthand, and needs both properties (name and type) to be defined.
Okay, well, it "works" but it breaks another thing.
When we declare a container as inline-size, we're saying that the width of the container is not defined by the children, but by the container itself. So, it's either we leave it as a block element, and it's really wide, and both images have a bigger border than you want, OR you have it as a flex item and, thanks to flex-shrink, it shrinks to zero width (because it's not looking at the children), and you have no border.
There might be a way to do this, but I can't figure out a way around the circular logic we need to make it work.with a pseudo on the .container (or in my case a <picture>) you can use bg radial gradient to create the border with a percentage
https://codepen.io/MarkBoots/pen/vYPmvbR
I thought you might have a solution, but didn't want to ping you 😆
ignore
display: grid om the picture, it does nothing (forgot to remove it)
haha.. 😁
Awesome! Thank you so much! @Kevin as well. Clever solution!