如何定位与顶部边框平齐的动态大小的图像？

Question

如何确保图像是动态大小的，始终保持其顶部边缘与其包含div的顶部边缘齐平？

正如您在下面的屏幕截图中所看到的，该图像目前正在从顶部的边缘向下移动，这使得它的位置与覆盖的画布不同。

https://imgur.com/a/hjxbclD

注意：--我还没能在代码中复制行为--只要我得到它，就会更新它。

代码示例

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

提前感谢您的帮助！

Answer 1

事实证明，object-fit有自己的object-position定位设置。将object-position: top添加到img元素就可以了！