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

Question

如何确保动态调整图像大小的图像的上边缘始终与其包含的 div 的上边缘齐平？

正如您在下面的屏幕截图中看到的，图像当前从顶部边缘向下移动，这导致它的位置与覆盖的 Canvas 不同。

https://imgur.com/a/hjxbclD

注意:我无法在 codepen 中复制这个行为，一旦我得到它就会更新

codepen example

#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 元素就成功了!