为什么在 Safari 中，当应用了 align-items:stretch 时，当 flex-item 时，`img` 的 `height` 不会拉伸到它的 flex-line 的大小? [英] Why, in Safari, does the `height` of `img`, when a flex-item, not stretch to the size of its flex-line when `align-items: stretch` is applied?

问题描述

就这个问题而言:

• dimension = `height` 或 `width`.
• FC = Flex 容器.
• FI = Flex-item.

---

场景一

看来，在 Chrome 和Safari，当一个img的'container'被指定在一维时，另一个维度会尝试变成一个尺寸，以便'container'保持纵横比:

以下是此概念的演示:

img {适合对象:覆盖；宽度:200px；}

<img src="https://cdn.britannica.com/20/154120-050-78DE15C0/lemur.jpg"/>

---

场景 2

但是，当 img 是 FI 时，Safari 执行此操作的能力似乎会中断.

#fc {显示:弹性；}图像{适合对象:覆盖；宽度:200px；}p{边距:0；}

<img src="https://cdn.britannica.com/20/154120-050-78DE15C0/lemur.jpg"><p>Lorem ipsum dolor 坐 amet，consectetur adipiscing 精英.Duis congue iaculis arcu 坐在 amet aliquam.俏皮的auctor diam.Proin quis sem sed magna feugiat euismod non non non ante.sed 在 orci ac felis molestie pretium eget 在 nisl.Nam nec quam 坐 amet arcu molestie molestie.Maecenas sed eros non sem interdum egestas vitae eu sem.古怪的 quis auctor sapien.Fusce risus odio, semper sed mattis quis, fringilla id arcu.Proin tempus finibus neque id ultrices.Nunc condimentum posuere ex, ut aliquam purus tempus quis.</p>

---

假设我对上面发生的事情的理解是正确的...

有解决办法吗?(即适用于 Safari 的解决方案?).如果没有，我应该能够写出原始问题，也许您可​​以建议另一种方法来实现我的目标(我的目标基本上是将 img 与文本块并排放置-如果 vw 变小，文本高度下降并变长，我希望 img 的容器"的 height 类似地增加并匹配文本的 height/FC 的高度(当只有 1 条弹性线时).

附言我必须在我的网站上进行其他一些 Safari 故障排除.它似乎与 imgs 有关.如果有人知道他们可以传递的任何资源，请注意我们仅限于编写代码的一些方式(为了考虑 Safari - 特别是 imgs)赞赏.

解决方案

Blink、Firefox 和 WebKit 的贡献者在过去几个月共同努力改进弹性项目图像.

• Chrome 90+ 和 Firefox 89+ 很少有已知的不兼容性(有时当图像具有 % 宽度时；比较下面 Chrome 与 Firefox 中的代码片段).
• 与之前的 Safari 稳定版本相比，Safari Tech Preview 123 取得了很大进步，但仍有一些已知问题.

如果您的 flexbox 包含在不同浏览器中呈现不同的图像项，请告诉我们.不要担心重复问题，但如果可以，请缩短演示案例.如果您认为有问题的浏览器是

• Safari:添加关于这个错误的评论和示例
• Chrome 或 Firefox:添加关于此问题的评论和示例

如果您的评论在 2-3 天后没有得到确认，请回复一个链接，我会进行分类.

<img src="//placekitten.com/100" style="width:100%;"><div style="width:100px; background: orange"></div>

For the purposes of this question:

• dimension = `height` or `width`.
• FC = Flex-container.
• FI = Flex-item.

---

Scenario 1

It seems, in both Chrome & Safari, when an img's 'container' is specified in 1 dimension, the other dimension'll try to become a size so that the 'container' retains the aspect ratio:

Here's a demonstration of this concept:

img {
 object-fit: cover;
 width: 200px;
}

<img src="https://cdn.britannica.com/20/154120-050-78DE15C0/lemur.jpg"/>

---

Scenario 2

However, Safari's ability to do this seems to break when the img is a FI.

#fc {
  display: flex;
}

img {
  object-fit: cover;
  width: 200px;
}

p {
 margin: 0;
}

<div id="fc">
 <img src="https://cdn.britannica.com/20/154120-050-78DE15C0/lemur.jpg">
 <p>
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis congue iaculis arcu sit amet aliquam. Quisque at auctor diam. Proin quis sem sed magna feugiat euismod non non ante. Sed at orci ac felis molestie pretium eget at nisl. Nam nec quam sit amet arcu molestie molestie. Maecenas sed eros non sem interdum egestas vitae eu sem. Quisque quis auctor sapien. Fusce risus odio, semper sed mattis quis, fringilla id arcu. Proin tempus finibus neque id ultrices. Nunc condimentum posuere ex, ut aliquam purus tempus quis.
 </p>
</div>

---

Presuming my understanding of what's gone on above is correct...

Is there a work-around? (i.e. a solution that works for Safari?). If not, I should be able to write up the original problem and perhaps you can suggest another way to achieve my goal (my goal's basically to have an img side-by-side to a block of text - and if the vw gets small, and the text height shoots down and gets longer, I want the imgs 'container''s height to similarly increase and match the text's height / height of the FC (when there's only 1 flex-line).

P.S. There's some other Safari troubleshooting I have to do on my website. It seems to concern imgs. If anyone was aware of any resource they could pass on that notes some of the ways in which we're confined to write code (in order to take into account Safari - particularly imgs) that'd be appreciated.

解决方案

Blink, Firefox, and WebKit contributors worked together the last few months on improving flex item images.

• Chrome 90+ and Firefox 89+ have very few known incompatibilities (sometimes when images have % width; compare the code snippet below in Chrome vs Firefox).
• Safari Tech Preview 123 made a lot of progress compared to the previous Safari stable release but still has a few more known issues.

If you have a flexbox with image items that renders differently across browsers, please let us know. Don't worry about duplicate issues, but shorten the demonstration cases if you can. If you think the buggy browser is

• Safari: add a comment with example on this bug
• Chrome or Firefox: add a comment with example on this issue

If your comment is not acknowledged after 2-3 days, respond with a link and I'll triage.

<div style="display: flex; width: 100px;">
  <img src="//placekitten.com/100" style="width:100%;">
  <div style="width:100px; background: orange"></div>
</div>

这篇关于为什么在 Safari 中，当应用了 align-items:stretch 时，当 flex-item 时，`img` 的 `height` 不会拉伸到它的 flex-line 的大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！