CSS - Scale border image to the border width or to a specific percentage
Question
I have the following code:
.container { width: 600px; height: 344px; background-color: rgb(255, 245, 187); } .frame { margin: 0px auto; width: 275.2px; height: 344px; /* * Available border images. The goal is to use image [1]: * - [1] https://i.ibb.co/6nW3dZC/fra-silver-cloud-wood-bg.png * - [2] https://i.ibb.co/YtVcXn2/fra-silver-cloud-wood-bg-resized.png */ background-image: url("https://i.ibb.co/wQSgvS7/jessica.jpg"), url("https://i.ibb.co/h7CCwc5/mcol-bottle-blue-bg.png"); background-size: 172px 240.8px, auto; background-position: center center; background-repeat: no-repeat, repeat; border-image: url("https://i.ibb.co/YtVcXn2/fra-silver-cloud-wood-bg-resized.png") 34.4 fill / 34.4px / 0 repeat; border-width: 0; border-style: inset; }
<div class="container"> <div class="frame"></div> </div>
which renders the following:
On the case above it is using for the border, the image: [2] (resized version).
Here you have the Codesandbox.io :
https://codesandbox.io/s/545l6olpv4
Here you have the preview:
https://545l6olpv4.codesandbox.io/
My problem is I cannot use that resized image [2] . Instead, I must use image [1] .
SizeOf([Image 2]) = 0.344 * SizeOf([Image 1])
But if for the border I use image [1] (target image), then the code above renders the following:
Any idea on how to make the code above work with image [1] for the border?
Please, provide back your solution in a forked Codesandbox.io .
Thanks!
1 answers
solution1
0 2019-05-13 00:03:35
Below is the solution:
Basically needed to change: 100 fill to 34.4 fill . Thanks @temani-afif !.
.container { width: 600px; height: 344px; background-color: rgb(255, 245, 187); } .frame { margin: 0px auto; width: 275.2px; height: 344px; background-image: url("https://i.ibb.co/wQSgvS7/jessica.jpg"), url("https://i.ibb.co/h7CCwc5/mcol-bottle-blue-bg.png"); background-size: 172px 240.8px, auto; background-position: center center; background-repeat: no-repeat, repeat; /* * Available border images. The goal is to use image [1]: * - [1] https://i.ibb.co/6nW3dZC/fra-silver-cloud-wood-bg.png * - [2] https://i.ibb.co/YtVcXn2/fra-silver-cloud-wood-bg-resized.png */ border-image: url("https://i.ibb.co/6nW3dZC/fra-silver-cloud-wood-bg.png") 100 fill / 34.4px / 0 repeat; border-width: 0; border-style: inset; }
<html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Scale border image to the border width</title> </head> <body> <div class="container"> <div class="frame"></div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.