html - CSS网格中的Safari图像高度

Question

我在移动 Safari 中遇到问题，其中图像超出了网格高度。Chrome 工作正常......这是 Chrome 中的样子：

以及它在我的 iPhone 上的样子：

以下是我的代码（简化）：

          <div
        style={{
          gridTemplateColumns: '25% 55% 20%',
          display: 'grid',
          minHeight: '20vh'
        }}
      >
          <img
            src={this.props.parent.sliderPhotos[0]}
            style={{
              objectFit: 'cover',
              width: '100%',
              height: '100%'
            }}
          />

        <div
          style={{
            backgroundColor: 'yellow',
          }}
        ></div>
        <div
          style={{
            backgroundColor: 'red',
          }}
        ></div>
      </div>

高度为 100% 和最大高度的样式不起作用。flex-direction: "column" 和 padding-top: "100%" 也不起作用。

关于它在两种浏览器中如何工作的更多想法？

标签： htmlcssreactjsimagesafari

Answer 1

• 这是移动Safari上的错误。此处描述：推文
• 看看这个：github repo