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

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

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

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

How to scale a css shape-outside based on an image

html

css

css-shapes