CSS - масштабировать изображение границы до ширины границы или до определенного процента - PullRequest
Новая
       3

CSS - масштабировать изображение границы до ширины границы или до определенного процента

1 голос
/ 13 мая 2019

У меня есть следующий код: 

.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>

, что дает следующее:

enter image description here

На приведенном выше случае этоиспользуя для границы, изображение: [2] (измененная версия).

Здесь у вас есть Codesandbox.io:

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

Здесь у вас есть предварительный просмотр:

https://545l6olpv4.codesandbox.io/

Моя проблема Я не могу использовать изображение с измененным размером [2].Вместо этого я должен использовать изображение [1]. 

SizeOf([Image 2]) = 0.344 * SizeOf([Image 1])

Но если для границы я использую изображение [1] (целевое изображение), то код выше отображает следующее:

enter image description here

Есть идеи, как заставить приведенный выше код работать с изображением [1] для границы?

Пожалуйста, предоставьте свое решение в виде раздвоенного Codesandbox.io.

Спасибо!

1 Ответ

0 голосов
/ 13 мая 2019

Ниже приведено решение:

В основном необходимо изменить: 100 fill на 34.4 fill. Спасибо @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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...