Safari浏览器中Flexbox内<img>元素比例异常问题求助

针对Safari中Flexbox布局下<li>被图片原始宽度撑开的问题，你可以通过以下调整解决：

1. 为<li>添加min-width: 0
   Safari的Flex项默认带有min-width: auto，会阻止元素收缩到内容宽度以下，导致<li>保留图片的原始宽度。添加min-width: 0可以解除这个限制，让<li>根据图片缩放后的实际宽度自适应。

2. 确保<img>的样式正确
   保持<img>的height: 100%，同时设置width: auto来维持图片的宽高比，这样图片会根据容器高度自动缩放宽度。

调整后的核心CSS代码如下：

.slider-container {
  height: 33.333vw; /* 仅此处设置高度，满足你只设置一次的需求 */
  /* 若为绝对定位，添加对应定位属性即可 */
  /* position: absolute; */
  /* top: 0; left: 0; */
}

.slider ul {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slider li {
  flex: 0 0 auto; /* 不拉伸不收缩，根据内容宽度自适应 */
  min-width: 0; /* 关键：解除Safari的最小宽度限制 */
  margin-right: 10px;
}

.slider img {
  height: 100%;
  width: auto;
  display: block; /* 去除图片默认行内元素间距 */
}

如果滑块容器是绝对定位的，只需给容器设置height: 33.333vw，内部<ul>通过height: 100%继承高度即可，无需重复设置高度，<img>会通过height:100%自动适配容器高度，同时维持自身宽高比，<li>也会根据图片实际显示宽度自适应，和Chrome表现一致。

内容的提问来源于stack exchange，提问作者norin89