So I am using shape-outside: url(path-to-image); in my figure element, which has an img inside of it with the same url path. The figure width is a percentage though, so it's responsive and changes width depending on view width, but the shape stays the same. Is there any way to make sure that the shape follows the size of the image element inside it?
THe below snippet won't work very well since it doesn't allow for url() in CSS due to access control
figure {
width: 33%;
float: left;
margin: 0;
shape-outside: url(https://sandman.net/bilder/icons/lego.png);
}
figure img {
width: 100%;
}<p>
<figure>
<a href="#link">
<img src="https://sandman.net/bilder/icons/lego.png">
</a>
</figure>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mauris nisl, ultrices et varius sit amet, egestas eu ex. Donec eros ex, ullamcorper sit amet nibh ultrices, rutrum sollicitudin nunc. Suspendisse potenti. In efficitur condimentum lectus,
a aliquet eros convallis sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi feugiat hendrerit odio a iaculis. Nullam non tincidunt diam. Donec tempus porttitor lorem, in porttitor lorem rhoncus ac. Aenean venenatis eros sit amet
magna faucibus, ac aliquet velit pretium. Fusce scelerisque vehicula nisi, sed cursus est suscipit pretium. Pellentesque ac risus nisi. Etiam condimentum, purus nec commodo pellentesque, odio mi lacinia nisl, et finibus nibh enim in massa. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean in velit ornare, aliquam ipsum sit amet, tincidunt dolor. Praesent malesuada viverra magna, pellentesque cursus nulla mattis in. Aenean eget ligula non velit condimentum
tincidunt nec vel magna.<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque mauris nisl, ultrices et varius sit amet, egestas eu ex. Donec eros ex, ullamcorper sit amet nibh ultrices, rutrum sollicitudin nunc. Suspendisse
potenti. In efficitur condimentum lectus, a aliquet eros convallis sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi feugiat hendrerit odio a iaculis. Nullam non tincidunt diam. Donec tempus porttitor lorem, in porttitor lorem
rhoncus ac. Aenean venenatis eros sit amet magna faucibus, ac aliquet velit pretium. Fusce scelerisque vehicula nisi, sed cursus est suscipit pretium. Pellentesque ac risus nisi. Etiam condimentum, purus nec commodo pellentesque, odio mi lacinia nisl,
et finibus nibh enim in massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean in velit ornare, aliquam ipsum sit amet, tincidunt dolor. Praesent malesuada viverra magna, pellentesque cursus nulla
mattis in. Aenean eget ligula non velit condimentum tincidunt nec vel magna.<br><br> Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed in finibus metus. Cras a mi eget odio rutrum accumsan. Praesent vitae tellus
non mauris dapibus lacinia nec ut nisl. Maecenas suscipit metus vel tempus ornare. Proin rhoncus turpis luctus turpis viverra, sit amet efficitur nisi malesuada. Nam eu ultrices sapien, in molestie augue. Cras imperdiet et lorem eu vulputate. Maecenas
eget sapien fermentum, congue turpis eget, aliquam ex. Sed diam turpis, lobortis vitae quam eu, faucibus eleifend arcu. Donec gravida nibh eget felis aliquet accumsan. Nullam interdum magna nisi, nec pulvinar nisi mattis eu.
</p>
The issue is related to figure (don't know exactly why) but ussing only
imgworks fine. In all the cases, you aren't allowed to usefigureinsidepto start with.