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

我正在使用图像试验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

，这并不意外。但是，我确实希望能够缩放形状以适应长方体，而不必生成形状的多个格式副本

我是否缺少

外部形状

的某种缩放功能？我可以在这方面找到的资源表明，

外部形状

图像的缩放因子实际上还没有指定，这使得这对于对象可能基于视区相对大小进行缩放的设计来说有些不太有用

编辑：我特别希望能够指定图像的高度（并相应地响应宽度）。此问题的初始答案在指定宽度下效果良好，但以下复制此答案的尝试不起作用，因为

div

的指定高度向下流动文本，并且将

div

设置为

float:left

会导致其自身的框替换流动中的形状：

div.inset{
高度：1.5英寸；
}
插图插图{
浮动：左；
宽度：自动；
身高：100%；
外部形状：url（'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png');
}

Lorem ipsum dolor sit amet，一位杰出的献祭者。在rutrum ornare fermentum中。在leo Volatipat中祈祷，在viverra tortor中祈祷，在tempus eros vel，在tempus diam.Morbi中祈祷。Etiam lobortis cursus elementum。Mauris Egets lectus Egets dolor Posuer varius vitae a mi。Praesent nec commodo tellus。Nam facilisis Tincidus risus ac Consequeat。Nam arcu tellus，ali这是我们的天堂，这是我们的门，这是我们的天堂，这是我们的天堂，这是我们的天堂，我们的天堂，我们的天堂，我们的天堂，我们的天堂，我们的天堂，我们的天堂，我们的天堂，我们的天堂，我们的天堂，我们的天堂，我们的天堂，我们的天堂，我们的天堂，我们的天堂，我们的天堂用酒精和酒精混合发酵的苏打水，用酒精和酒精混合发酵的苏打水。

说出以下内容：

形状被计算为包含指定图像不透明度大于形状图像阈值的区域的一条或多条路径。[…]

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

因此，使用

background size

属性不会改变元素的内容框大小。相反，使用实际的图像元素应该使计算出的形状响应图像的当前内容框大小。现在，您只需将图像元素的

宽度

的相对单位设置为ac，如

%

提高反应能力

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

.shape{
浮动：左；
宽度：100%；
外部形状：url(https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Svg_example3.svg/243px-Svg_example3.svg.png);
}
.集装箱{
宽度：40%；
}

谢谢，这很有效！它没有完全涵盖我在这里尝试的特定用例，但它是一个指向正确方向的伟大指针。嗯，虽然我在让文本正确地围绕它流动方面遇到了困难-Safari中的元素检查器显示的形状是正确的，但文本仍然围绕着外部框流动，尽管我在您的示例中，t工作得很好。无论我是设置容器宽度还是高度，都是这样（并且我没有浮动容器div本身）你能在你的问题中用一个堆栈片段重现这个问题吗？或者在一个新的问题中重现这个问题吗？当然，我会尽量少重现这个问题的。哈哈，但我刚刚找到了一个解决方案，适用于我试图做的事情。我会建议相应地编辑你的帖子：）