图片元素的WebP弯曲

背景：Bootstrap 3 way of laying out 8 images in a row 图片元素的WebP弯曲

我现在知道如何弯曲3个图像：

body { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    align-content: space-around; 
 
    align-items: flex-start; 
 
} 
 
img { 
 
    width: 30%; 
 
    order: 0; 
 
    flex: 0 1 auto; 
 
    align-self: auto; 
 
}

<img src="https://placehold.it/1024x768" /> 
 
<img src="https://placehold.it/1024x768" /> 
 
<img src="https://placehold.it/1024x768" />

但我要介绍的小WebP的替代图片，我想你用picture element这样做。

body { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    align-content: space-around; 
 
    align-items: flex-start; 
 
} 
 
picture { 
 
    width: 30%; 
 
    order: 0; 
 
    flex: 0 1 auto; 
 
    align-self: auto; 
 
}

<picture> 
 
    <source srcset="http://s.natalian.org/2015-12-12/1024x768.webp" type="image/webp" /> 
 
    <img src="https://placehold.it/1024x768" /> 
 
</picture> 
 

 
<picture> 
 
    <source srcset="http://s.natalian.org/2015-12-12/1024x768.webp" type="image/webp" /> 
 
    <img src="https://placehold.it/1024x768" /> 
 
</picture> 
 

 
<picture> 
 
    <source srcset="http://s.natalian.org/2015-12-12/1024x768.webp" type="image/webp" /> 
 
    <img src="https://placehold.it/1024x768" /> 
 
</picture>

但是，我无法弄清楚如何使CSS格式的图片3跟贴像他们与IMG做。我错过了什么？

来源

2015-12-12 hendry

当您创建一个弹性容器时，只有子元素变成弹性项目。子女以外的后代不会成为弹性项目，弹性属性不适用于他们。

在您的first example,body是flex容器，img是flex项目。

然而，在第二个示例中，body是flex容器，picture是flex项目，而img就flex而言没有什么特别之处。这是一个正常的内联元素。

您需要制作picture（嵌套）柔性容器才能将柔性属性应用于图像元素。但在你的情况下，this may not be necessary。

另请注意，picture元素尚未得到普遍支持（请参阅caniuse.com）。

你的第一个演示：DEMO 1

你的第二个演示，修改为：DEMO 2

来源

2015-12-12 05:09:27

为了提供WEBP替代的目的，''支持就足够了。只有Safari 9不支持它，因此您不能将其用于JPEG2000的MIME类型切换。 –

对于本网站上的答案，您会发现有用，[考虑upvote]（http://stackoverflow.com/help/someone-answers）。没有义务。只是提高质量内容的一种方式。 –

图片元素的WebP弯曲

回答

相关问题