Как расположить динамическое изображение вровень с верхней границей? - PullRequest
Новая
       14

Как расположить динамическое изображение вровень с верхней границей?

0 голосов
/ 10 октября 2018

Как я могу убедиться, что у изображения динамического размера всегда верхний край совпадает с верхним краем содержащего его div?

Как видно на скриншоте ниже, изображение в настоящее время смещается внизот верхнего края, который вызывает его положение, отличается от наложенного холста.

https://imgur.com/a/hjxbclD

ПРИМЕЧАНИЕ: Мне не удалось повторить поведение в codepen, будет обновлять это всякий раз, когда я получу это

пример кодекса 

#image-viewer {
  position: absolute;
  top: 89px;
  left: 0;
  height: calc(100vh-89px);
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  // ...

  #main-image-slider {
    position: relative;
    top: 0;
    height: calc(100% - 34px);
    float: none;
    overflow-y: hidden;
    overflow-x: hidden;
    object-fit: contain;

    .slide {
      display: none;
      max-height: 100%;
      width: auto;
      // ...

      .canvas {
        position: absolute;
        top: 0;
        left: 0;
      }

      .crop-image-wrapper {
        text-align: center;
        max-height: calc(100% - 108px);

        img {
          height: calc(100vh - 108px);
          max-height: 100%;
          max-width: 100%;
          object-fit: contain;
        }
      }
    }
  }
}

Заранее спасибо за вашу помощь!

1 Ответ

0 голосов
/ 19 октября 2018

Оказывается, object-fit имеет собственную настройку позиционирования с помощью object-position.Добавление object-position: top к элементу img добилось цели!

...