Question

背景：Bootstrap 3 way of laying out 8 images in a row

我现在知道如何弯曲3张图片：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

但我想介绍较小的 WebP 替代图片，我认为你会使用picture element。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

然而，我无法弄清楚如何使PICTUREs 3的CSS格式与IMG一样。我错过了什么？

Answer 1

创建Flex容器时，只有子元素成为弹性项目。儿童以外的后代不会成为弹性物品，柔韧性不适用于他们。

在first example中，body是弹性容器，img是弹性项目。

然而，在第二个示例中，body是弹性容器，picture是弹性项目，而img在弹性方面没什么特别之处。它是一个普通的内联元素。

您需要将picture设置为（嵌套的）Flex容器，以便将flex属性应用于图像元素。但在你的情况下，this may not be necessary。

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

您的第一个演示：DEMO 1

您的第二个演示版，已修订：DEMO 2

图片元素WebP flexing

1 个答案: