3

I want to use a roundish image as a border image to cover the whole outer part of an image. You can see two images below one of them being rectangle and the other one being round. I was able to figure out how to use the rectangle image to perfectly fit the given image, but now I am trying to use the same technique to fit the circular image as the border and I can't find a way to make this happen with the same technique. So currently for the rectangle image following styling is being used:

.frame{ height: 192px; width: 160px; border-width: 30.4px 32px; border-image: url("/images/frame-4.png") 100 / 1.6 / 0 stretch; }

enter image description here

Now to use the circular image as border and place the image inside, I am using border-radius on the frame class.

.frame{ border-radius: 111px; height: 192px; width: 160px; border-color: red; border-width: 16px; background: blue; /* border-image: url("/images/frame-5.png") 100 / 1 / 0 stretch; */ }

When I use a border color everything looks fine:

enter image description here

But when I turn on the border image things start to fall apart:

enter image description here

I am not sure what is happening and how to fix this. https://i.sstatic.net/TOSDv.jpg here is the image link if anyone want to give this a try. Since I want the border image to perfectly wrap the image, I thought that border images are the best way of doing it instead of using multiple div. Is there an easier and a better way of doing it?

Improve this question

2 Answers 2

Reset to default
4

You can simply do like below. A transparent border and your frame as background:

img { border-radius:50%; border:19px solid transparent; background:url(https://i.imgur.com/erDQcs5.png) center/100% 100% border-box; }
<img src="https://picsum.photos/id/1/200/200" > <img src="https://picsum.photos/id/1/200/150" > <img src="https://picsum.photos/id/1/150/200" >

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

how did you come up with the 22px number? This works fine for one particular implementation but when i have to use the frame on multiple size of images and for those the frame doesnot seem to always fit the image. My shapes arenot always round and can be oval as well and it doesnot look to work there
@Ashok check the update. The number I am using depend on the size of your frame and image. I doubt there is a generic solution
The new implementation seems to work, i might have to tweak it a little for what i want. I want the frame-width to increase and decrease. When i do that now, the space between the image and frame seems to increase and decrease, is there any other param in the background property to do just that? Thanks for the help
1

Hmm... How about this?

I think this isn't perpect solution but this works fine.

I used background-image and padding instead of border-image.

In child element(contents), I used border-radius: inherit.

If you want test example code, please put the right url for images.

.border-image { border-radius: 111px; height: 192px; width: 160px; background-image: url("frame"); background-size: 100% 100%; padding: 20px; } .contents { width: 100%; height: 100%; border-radius: inherit; background-image: url("url"); background-repeat: no-repeat; background-size: cover; }
<body> <div class="border-image"> <div class="contents"></div> </div> </body>

Improve this answer

8 Comments

seems to work but if i wanted to make the border image have more thickness, would i have to increase the padding?
@Ashok Yes, you can adjust the border thickness by changing the padding.
yeah but it messes something's up. The distance between the border and the image seems to increase creating a gap in the middle. I dont think this method is very modular as i want to increase the border width without having to increase the height and width as well.
@Ashok How about use box-sizing: border-box style to frame element?
After doing that we lose control over we lose control over the width of the image. The padding just increases the gap between the border and the image.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.