CSS-将边框图像缩放到边框宽度或特定百分比

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). 在上面的案例中，它用于边框，图像： [2] （调整大小的版本）。

Here you have the Codesandbox.io : 在这里，您拥有Codesandbox.io ：

https://codesandbox.io/s/545l6olpv4 https://codesandbox.io/s/545l6olpv4

Here you have the preview: 在这里，您可以预览：

https://545l6olpv4.codesandbox.io/ https://545l6olpv4.codesandbox.io/

My problem is I cannot use that resized image [2] . 我的问题是我无法使用该调整大小的图像[2] 。 Instead, I must use image [1] . 相反，我必须使用图像[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: 但是，如果我使用图像[1] （目标图像）作为边框，则上面的代码将呈现以下内容：

Any idea on how to make the code above work with image [1] for the border? 关于如何使上面的代码与边框的图像[1]兼容的想法吗？

Please, provide back your solution in a forked Codesandbox.io . 请在分叉的Codesandbox.io提供您的解决方案。

Thanks! 谢谢！

Answer 1

Below is the solution: 解决方法如下：

Basically needed to change: 100 fill to 34.4 fill . 基本上需要更改：从100 fill到34.4 fill 。 Thanks @temani-afif !. 谢谢@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>

CSS-将边框图像缩放到边框宽度或特定百分比

问题描述

1 个解决方案

解决方案1
0 2019-05-13 00:03:35

CSS-将边框图像缩放到边框宽度或特定百分比

问题描述

1 个解决方案

解决方案1 0 2019-05-13 00:03:35

解决方案1
0 2019-05-13 00:03:35