Question

在Safari中，个人照片所占的比例大于其父容器，并且不停留在该容器中。在Firefox中，它可以正确呈现。

我正在使用React，所以这就是为什么我的className是这样格式化的原因。

 <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中呈现的方式不同

1 个答案: