0

I try to use an image as a border image for a div.

The div width and height changes (I don't know how the dimensions will be)

The border-images width and height changes (I don't know how the dimensions will be)

I really tried to understand what is slicing doing, but I can't get a dynamic formula so that any given border-image will look good for any given div size (look good = not sctreched, filled,nicely repeated as long the border-image is seamless)

for a given border-image pineapple.png with a dimension 1584x1200px => 105 133 round looks good, but how do I get this magic numbers? What numbers use there for slice to get a crispy border-image regarding not violating its proportions? Is it depending on the div size AND the border-image size?

div{
background:red;
height:100px;
width:400px;
border: solid 5vmin transparent;
border-width: 5.67909vmin;
border-image: url(https://cdn.dribbble.com/users/4297010/screenshots/7740500/media/7c2554596ed3249419127182c5199e65.jpg)105 133 round;
}
<div>
</div>

Javascript solutions are also much appreciated

Suisse
  • 3,467
  • 5
  • 36
  • 59
  • this can probably help you understand how it works: https://stackoverflow.com/a/56915094/8620333 – Temani Afif Dec 06 '21 at 21:29
  • I read it, and also understand what is written there, but I still don't get it at all! means when I don't have a square image (same dimensions) than I don't know how to get the value for the border-with or the slicing so the image looks crispy.. I don't get it at all. – Suisse Dec 07 '21 at 07:50

0 Answers0