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?
No description
7 Replies
Zampa
Zampa10mo ago
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.
Kevin Powell
Kevin Powell10mo ago
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.
MarkBoots
MarkBoots10mo ago
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
Kevin Powell
Kevin Powell10mo ago
I thought you might have a solution, but didn't want to ping you 😆
MarkBoots
MarkBoots10mo ago
ignore display: grid om the picture, it does nothing (forgot to remove it)
No description
MarkBoots
MarkBoots10mo ago
haha.. 😁
Zampa
Zampa10mo ago
Awesome! Thank you so much! @Kevin as well. Clever solution!
Want results from more Discord servers?
Add your server