图像元素WebP弯曲

Question

背景： Bootstrap 3连续布置8张图像的方式

我现在知道如何显示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元素来实现 。

 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> 

但是，我不知道如何使PICTUREs 3像CSS一样使用CSS格式。 我想念什么？

Answer 1

创建flex容器时，只有子元素成为flex项目。 子代以外的子代不会成为弹性项目，弹性属性也不适用于它们。

在第一个示例中 ， body是flex容器， img是flex项。

但是，在第二个示例中， body是flex容器， picture是flex项，而img在flex方面没什么特别的。 这是一个普通的内联元素。

您需要将picture设为（嵌套的）flex容器，以便将flex属性应用于图像元素。 但是对于您而言， 这可能不是必需的 。

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

您的第一个演示： DEMO 1

修改后的第二个演示： DEMO 2