Flex justify-content, align-items 在 Safari 或移动浏览器上不起作用

Question

我在容器元素中有图像。当图像高度小于容器高度时，我希望图像位于容器顶部。当图像宽度小于容器宽度时，我希望图像居中。
这就是我希望它的外观，它适用于桌面 Firefox 和 Chrome。

但是，在桌面版 Safari 和移动版 Safari、Firefox 和 Chrome 上，它看起来像这样，较短的图像垂直居中，较窄的图像被拉伸以适应容器宽度：

#container {
  display: flex;
  flex-direction: row;
}

.mainImageContainer {
  width: 500px;
  height: 375px;
  margin: 1rem;
}

.mainImageBtn {
  background-color: rgb(231, 60, 60);
  display: -webkit-box;   /* tried this did not work */
  display: -webkit-flex;  /* tried this did not work */
  display: -moz-box;      /* tried this did not work */
  display: -ms-flexbox;   /* tried this did not work */
  display: flex;
  width: 500px;
  height: 375px;
  border: none;
  padding: 0;
  justify-content: center;
  -webkit-box-pack: start;    /* tried this did not work */
  -webkit-box-align: start;   /* tried this did not work */
  -webkit-flex-align: start;  /* tried this did not work */
  -ms-flex-align: start;      /* tried this did not work */
  -webkit-align-items: start; /* tried this did not work */
  align-items: flex-start;
}

.mainImage {
  cursor: zoom-in;
  max-width: 100%;
  max-height: 100%;
}

<div id="container">
  <div class="mainImageContainer">
    <button class="mainImageBtn">
      <img class="mainImage" src="https://eoja82.github.io/For-Sale/img/car_2.jpg" alt="car"></img>
    </button>
  </div>
  <div class="mainImageContainer">
    <button class="mainImageBtn">
      <img class="mainImage" src="https://eoja82.github.io/For-Sale/img/tumbler%20-%202.jpeg" alt="instructions"></img>
    </button>
  </div>
</div>

我阅读了这篇文章，但没有一个解决方案适合我：How do I make flex box work in safari?。

我使用的是最新版本的浏览器。

Answer 1

1. Safari 在按钮上的 flexbox 存在问题。要解决此问题，请将 button 的内容包装在 div 中，并改为设置 div 的样式。

2. 设置图像的两个轴可能会导致纵横比被忽略。使用object-fit: contain 确保不会发生这种情况。

#container {
  display: flex;
  flex-direction: row;
}

.mainImageContainer {
  width: 500px;
  height: 375px;
  margin: 1rem;
}

.mainImageBtn {
  border: none;
  padding: 0;
}

.mainImageWrapper {
  background-color: rgb(231, 60, 60);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 500px;
  height: 375px;
}

.mainImage {
  cursor: zoom-in;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: top center;
}

<div id="container">
  <div class="mainImageContainer">
    <button class="mainImageBtn">
      <div class="mainImageWrapper">
        <img class="mainImage" src="https://eoja82.github.io/For-Sale/img/car_2.jpg" alt="car" />
      </div>
    </button>
  </div>
  <div class="mainImageContainer">
    <button class="mainImageBtn">
      <div class="mainImageWrapper">
        <img class="mainImage" src="https://eoja82.github.io/For-Sale/img/tumbler%20-%202.jpeg" alt="instructions" />
      </div>
    </button>
  </div>
</div>