图片元素 WebP flexing

Question

背景：

我现在知道如何弯曲 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 格式与 IMG 中的 PICTUREs 3 并驾齐驱。我错过了什么？

Answer 1

当您创建弹性容器时，只有 child 元素成为弹性项目。 children 之后的后代不会成为弹性项目，弹性属性不适用于它们。

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

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

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

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

您的第一个演示：DEMO 1

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

图片元素 WebP flexing

Picture element WebP flexing

html

css

flexbox

responsive-images