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说以下话：

计算形状是包围指定图像的不透明度大于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.

如何基于图像缩放CSS形状外部

1 个答案: