页面在 Safari 和 Firefox 中呈现不同

Question

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

我正在使用 React，所以这就是我的类名采用这种格式的原因。

 <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%;
}

Answer 1

首先尝试要求或导入图像。

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

docs

页面在 Safari 和 Firefox 中呈现不同

Page rendered differently in Safari and Firefox

html

css

sass

next.js