代码之家 › 专栏 › 技术社区 › fluffy

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

css-shapes css3 css html

fluffy · 技术社区 · 6 年前

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 向下流动文本,并设置 部门 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\u example3.Svg/243px-Svg\u example3.Svg.png“></div>

Lorem ipsum悲哀地坐在amet,奉献着一位精英。在金樱子中发酵。在狮子座的普雷森特,厄洛斯的速度,直径的速度。莫比在维韦拉托托。小叶草。毛里斯·艾格特·莱克特·艾格特·多洛·波苏尔·瓦里乌斯·维塔米。普雷森特nec commodo tellus。这是一个很好的解决方案。Nam arcu tellus、aliquam sodales metus vel、mollis porta purus。Suspendisse sagittis hendrerit dolor,坐amet accumsan libero cursus坐amet。酒后驾车不是流苏。前庭前庭权杖利奥,坐在阿梅特元素毛里斯。多内克·埃吉特·杜伊·莫利斯,维内纳蒂斯·杜伊·诺,维韦拉·乌尔纳。Nam molestie、felis ut mollis ultricies、erat turpis ullamcorper sem、nec eleifend quam ex ac eros。发酵大白粉。悬钩子。

1 回复 | 直到 6 年前

Community Egal 4 年前

The specs

形状被计算为包围指定图像的不透明度大于形状图像阈值的区域的路径。[...]

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

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>

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.