CSS 形状外和响应式内容

如何解决CSS 形状外和响应式内容

所以我使用 shape-outside: url(path-to-image);在我的图形元素中，其中有一个具有相同 url 路径的 img。图形宽度是一个百分比，因此它具有响应性并根据视图宽度更改宽度，但形状保持不变。有什么办法可以保证形状跟里面的图片元素的大小一致吗？

由于访问控制，下面的代码段不能很好地工作，因为它不允许在 CSS 中使用 url()

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,rutrum sollicitudin nunc. Suspendisse
  potenti. In efficitur condimentum lectus,in porttitor lorem
  rhoncus ac. Aenean venenatis eros sit amet magna faucibus,et finibus nibh enim in massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean in velit ornare,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>

解决方法

该问题与图有关（不知道确切原因）但仅使用 img 可以正常工作。在所有情况下，您都不允许在 figure 中使用 p 开始。

img {
  width: 33%;
  float: left;
  margin: 0;
  shape-outside: url(https://i.ibb.co/VNpkTZt/lego.png);
}

p {
  margin:0;
}

<p>
      <img src="https://i.ibb.co/VNpkTZt/lego.png">
  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,rutrum sollicitudin nunc. Suspendisse
  potenti. In efficitur condimentum lectus,in porttitor lorem
  rhoncus ac. Aenean venenatis eros sit amet magna faucibus,et finibus nibh enim in massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean in velit ornare,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>