Is it possible to make the <div>
fit it's css mask size? So say the mask image is 100px x 100px. Is it possible to make the <div>
automatically 100px x 100px big? (not by putting style="width: 100px; height: 100px"
on the div)
I am looking for something like style="width: 100%; height: auto"
or something. It doesn't have to be a <div>
element, it can be anything (like an <img>
maybe?)
Here is something to play with (you guys can edit this right?):
.logo {
background-color: black;
mask-image: url('https://s.cdpn.io/3/kiwi.svg');
width: 100px;
height: 100px;
}
.image {
content: url('https://s.cdpn.io/3/kiwi.svg');
width: 100px;
height: auto;
}
<div class="logo"></div>
<img class="image">
If you guys can't edit the above one, here is one you can edit (in Angular, I am not sure where else I can create stuff like this?)
If your SVG will always be the same then you know its ratio so you can consider the padding trick
If the SVG can be a random one, use it as a hidden image to define the ratio
I am embedding the SVG inside the mask property because it won't work with an url due to CORS policy