Загруженное изображение не по центру Safari

Question

Я загружаю изображение от пользователя и отображаю его на своей странице. У меня также есть холст, который я использовал, чтобы отметить линии на изображении. Я хочу, чтобы изображение отображалось в том же месте, что и холст в центре. Прямо сейчас отображение изображения начинается с центра. Проблема не существует в Firefox и Chrome, но только в Safari. Я использую также материализоваться. css в этом проекте. Как я могу отобразить изображение в точном центре?

    <style>
      .image {
        position: absolute;
        z-index: 1;
      }
      .container {
        display: inline-block;
        margin: 0 auto;
        position: relative;
        width: 100%;
      }
      .canvas {
        position: relative;
        z-index: 20;
      }
    </style>


    <div class="container">
      <img
        width="400"
        height="400"
        class="image"
      />
      <canvas width="400" height="400" class="canvas" />
    </div>

Красная вещь - это мое изображение

Answer 1

Существует много способов центрировать изображение. В вашем случае я бы рекомендовал использовать display: block; margin: 0 auto; и присвоить ему max-width: 400px; width: 100%;, чтобы изображение всегда сохраняло соотношение сторон и не получалось больше, чем вы хотите.

Если вы используете width: 400px, когда он достигает устройств с небольшой шириной (телефонов), он выполнит прокрутку страницы, что является плохим UX. Кроме того, вам обычно не нужно height: 400px. Когда вы добавляете фактическое изображение, дайте ему автоматически заполнить высоту.

Кроме того, избегайте наложения стилей на разметку. Все стили должны быть в CSS для организации.

Изучите основы HTML / CSS через курс. Неважно, используете ли вы Bootstrap, Materialise, Bulma и др. c. Все сводится к основам.

.image {
        display: block;
          margin: 0 auto;
          max-width: 400px;
          width: 100%;
          height: 400px;
          border: 1px solid lightgray;
      }

Проверьте код на коде ручки здесь .