html - 如何根据图像缩放 css shape-outside

Question

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

例如，在这个 CSS 片段中:

#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 图像的缩放因子实际上尚未指定，这使得它对于对象可能基于视口(viewport)缩放的设计不太有用-例如，相对大小。

编辑:特别是我希望能够指定图像的高度(并相应地响应宽度)。这个问题的初始答案在指定宽度下效果很好，但以下重现此问题的尝试不起作用，因为 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说以下内容:

The shape is computed to be the path or paths that enclose the area(s) where the opacity of the specified image is greater than the shape-image-threshold value. [...]

The image is sized and positioned as if it were a replaced element whose specified width and height are the same as the element’s used content box size.

因此使用 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.