Question

如何确保图片的动态尺寸始终使其上边缘与包含div的上边缘齐平？

如下面的屏幕快照所示，图像当前正在从顶部边缘向下移动，这导致其位置与覆盖的画布确实有所不同。

注意：：我无法在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;
        }
      }
    }
  }
}

提前感谢您的帮助！

Answer 1

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

如何将动态尺寸的图像放置在与顶部边框齐平的位置？

1 个答案: