页面在 Safari 和 Firefox 中呈现不同答案

【问题标题】：Page rendered differently in Safari and Firefox页面在 Safari 和 Firefox 中呈现不同
【发布时间】：2019-06-01 12:05:01
【问题描述】：

在 Safari 中，个人图片占用的空间超过其父容器，并且不会停留在容器内。在 Firefox 中，它可以正确呈现。

我正在使用 React，所以我的 classNames 是这样格式化的。

 <div className="landing">
    <div className="landing-content">
      <div className="portait-container">
        <img src="../static/portrait.jpg" className='portait' />
        <p>Thats Me!</p>
      </div>
    </div>
  </div>

CSS：

.landing {
  display: grid;
  grid-template-columns: 10vw 15vw auto 15vw 10vw;
  grid-template-rows: 25vh 75vh;
  background-color: red;
  height: 100%;
  width: 100%;
  margin: 0;
  z-index: 2;
}
.landing-content {
  height: 100%;
  width: 100%;
  display: grid;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 3;
}
.portait-container {
  height: 100%;
  width: 100%;
  text-align: center;
  justify-content: center;
  justify-self: center;
}
.portait {
  max-width: 100%;
  height: 30%;
  border-radius: 100%;
}

【问题讨论】：

标签： html css sass next.js

【解决方案1】：

先尝试要求或导入图像。

import portrait from '../static/portrait.jpg';
             OR
var portrait =  require('../static/portrait.jpg') 
<img src={ portrait } className='portait'/>

docs

【讨论】：

我用的是NextJS，所以他们的做法是使用/static文件夹。
我似乎遗漏了一些东西。在我的回答中，您是否仍然需要或从 /static 导入？如果问题是 NextJS 特有的，添加 NextJS 标记可能会为您提供更相关的答案...
它抛出一个错误并说我需要一个加载器来尝试导入。如果我使用 require 它会加载但仍然有同样的问题。
冒着浪费您时间的风险，我很好奇将宽度和高度更改为 100vw 和 100vh 是否会有所作为。
将根高度和宽度更改为 100vw vh，有效。我还将 img 的大小更改为 50vw，它可以工作。