如何确保动态调整图像大小的图像的上边缘始终与其包含的 div 的上边缘齐平?
正如您在下面的屏幕截图中看到的,图像当前从顶部边缘向下移动,这导致它的位置与覆盖的 Canvas 不同。
注意:我无法在 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;
}
}
}
}
}
预先感谢您的帮助!
最佳答案
原来 object-fit
有它自己的定位设置 object-position
。将 object-position: top
添加到 img 元素就成功了!
关于css - 如何定位动态大小的图像与顶部边框齐平?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52738108/