Страница отображается по-разному в Safari и Firefox - PullRequest
Новая
       7

Страница отображается по-разному в Safari и Firefox

0 голосов
/ 06 января 2019

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

1 Ответ

0 голосов
/ 06 января 2019

Попробуйте сначала запросить или импортировать изображение. 

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

* документы 1005 *

...