如何根据图像在外部缩放 css 形状

Question

我正在使用图像尝试 CSS 的 shape-outside 属性，但至少在 Safari 中，生成的形状始终基于原始图像大小，我看不到任何基于框实际缩放图像的方法尺寸，这对于真正的响应式设计来说是必要的（更不用说为了初始测试目的而让生活更轻松）。

例如，在这个 CSS sn-p 中：

#shapetest {
    float: left;
    width: 100px;
    height: 300px;
    background: url('some-image.png');
    shape-outside: url('some-image.png');
    background-size: contain;
}

虽然缩放背景以覆盖 div，但形状仍为 some-image.png 的原始大小，这并不意外。但是，我真的希望能够缩放形状以适应盒子，而不必生成形状的多个再现。

我是否缺少shape-outside 的某种缩放功能？我可以在此找到的资源表明 shape-outside 图像的缩放因子实际上尚未指定，这对于对象可能基于视口相对大小进行缩放的设计来说不太有用。 /p>

编辑：特别是我希望能够指定图像的 height（并让宽度做出相应的响应）。这个问题的初始答案在指定的宽度下运行良好，但以下重现此问题的尝试不起作用，因为div 的指定高度使文本向下流动，并将div 设置为float:left 导致它自己的盒子来取代流中的形状：

div.inset {
    height: 1.5in;
}

div.inset img {
    float: left;
    width: auto;
    height: 100%;
    shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}

<div class="inset"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.

使用指定的宽度和计算的高度可以正常工作，但是：

div.inset {
    width: 1.5in;
}

div.inset img {
    float: left;
    width: 100%;
    height: auto;
    shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}

<div class="inset"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png"></div>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.

Answer 1

The specs 说如下：

形状被计算为包含指定图像的不透明度大于 shape-image-threshold 值的区域的路径。 [...]

图像的大小和位置就像它是一个替换元素，其指定的宽度和高度与元素使用的内容框大小相同。

所以使用background-size 属性不会改变元素的内容框大小。使用实际的图像元素应该使计算的形状响应图像的当前内容框大小。您现在可以简单地为图像元素的width 设置一个相对单位，例如%，以实现响应。

这是一个工作示例。您可以更改容器的宽度，图像的宽度及其形状应响应容器宽度的变化：

.shape {
  float: left;
  width: 100%;
  shape-outside: url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png);
}

.container {
  width: 40%;
}

<div class="container">
  <img class="shape" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png" />
</div>

但是，这种方法依赖于一个只有宽度的 div，它没有自己的高度。但这个解决方案也有效：

img.inset {
    float: left;
    width: auto;
    height: 1.5in;
    shape-outside: url('https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}

<img class="inset"  src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png">

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rutrum ornare fermentum. Praesent at leo volutpat, tempus eros vel, tempus diam. Morbi in viverra tortor. Etiam lobortis cursus elementum. Mauris eget lectus eget dolor posuere varius vitae a mi. Praesent nec commodo tellus. Nam facilisis tincidunt risus ac consequat. Nam arcu tellus, aliquam sodales metus vel, mollis porta purus. Suspendisse sagittis hendrerit dolor, sit amet accumsan libero cursus sit amet. Duis non fringilla ante. Vestibulum vestibulum scelerisque leo, sit amet elementum mauris. Donec eget dui mollis, venenatis dui non, viverra urna. Nam molestie, felis ut mollis ultricies, erat turpis ullamcorper sem, nec eleifend quam ex ac eros. Praesent sodales ligula quis dui maximus fermentum. Suspendisse tempor luctus elit.