旋转包含的图像后，div 高度未正确设置

Question

我使用的是bootstrap modal，并且有在modal body中展示图片的需求。图像宽度和高度是变化的。我还需要能够放大/缩小，并将图片向左/向右旋转 90°。因此，模态大小也会根据当前图片大小和旋转而变化。

图像容器本身已经定义了最小和最大宽度和高度，以确保模式停留在屏幕上。图像容器的溢出处理是强制性的，因为图像尺寸可以大于前面提到的最小/最大模态宽度/高度。并且您必须能够看到或至少滚动到图像的任何部分。

缩放工作正常，发生旋转时出现问题。图像按预期旋转，但图像容器 (#imageModalBody) 的高度仍然是旋转前的高度，尽管我将其设置为setImageContainerDimensions 函数中的精确 px 值。这在图片下方留下了很多空白空间。 （在相反的情况下也是如此->如果原始图像宽度>高度，则旋转后空白区域将位于图像的右侧）

functionally identical JSFiddle

原始 CSS：

#imageModalBody {
    overflow: auto;
    margin:auto;
    width: fit-content;
    max-height: 825px;
}

#imageModalBody, #imageModalBody .img-fluid{
    max-width: 1300px;
    min-width: 250px;
    min-height: 250px;
}
#imageModalBody .img-fluid {
    transform-origin: top left;
    -webkit-transform-origin: top left;
    -ms-transform-origin: top left;
}
#imageModalBody.rotate90 .img-fluid {
    transform: rotate(90deg) translateY(-100%);
    -webkit-transform: rotate(90deg) translateY(-100%);
    -ms-transform: rotate(90deg) translateY(-100%);
}
#imageModalBody.rotate180 .img-fluid {
    transform: rotate(180deg) translate(-100%, -100%);
    -webkit-transform: rotate(180deg) translate(-100%, -100%);
    -ms-transform: rotate(180deg) translateX(-100%, -100%);
}
#imageModalBody.rotate270 .img-fluid {
    transform: rotate(270deg) translateX(-100%);
    -webkit-transform: rotate(270deg) translateX(-100%);
    -ms-transform: rotate(270deg) translateX(-100%);
}

原始JS：

gallery = {
    /* ... */
    zoom: function (context, step) {
        var modal = context.closest('.modal');
        var image = modal.find('.img-fluid');
        image.width(image.width() + step);
        gallery.setImageContainerDimensions(modal.find('#imageModalBody'));
    },
    rotate: function (context, step) {
        var container = context.closest('.modal').find('#imageModalBody');
        var rotation = parseInt(container.attr('data-rotation'));
        var newRotation = rotation + step;

        newRotation = newRotation < 0 ? (newRotation + 360) % 360 : newRotation % 360;
        container.removeClass('rotate' + rotation);
        container.addClass('rotate' + newRotation);
        container.attr('data-rotation', newRotation);
        gallery.setImageContainerDimensions(container, newRotation);
    },
    setImageContainerDimensions: function (container, rotation) {
        var image = container.find('.img-fluid');
        rotation = rotation || parseInt(container.attr('data-rotation'));
        if (rotation % 180 == 90) {
            container.width(image.height() + 17).height(image.width());
        }
        else {
            container.width(image.width() + 17).height(image.height());
        }
    },
    getModalElement: function (eventItem) {
        var modal = $(`<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="imageModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title" id="imageModalTitle">${eventItem.title}</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body">
                        <div id="imageModalBody" data-rotation="0" class="rotate0"></div>
                    </div>
                </div>
            </div>
        </div>`);
        modal.prepend(gallery.getModalControlElement(eventItem.modalImg));
        modal.find('#imageModalBody').append(eventItem.modalImg);
        return modal;
    },
    getImageElement: function (item) {
        return $(`<img class="img-fluid" src="${item.imageData}" alt="${item.title}" title="${item.title}">`);
    },
    /* ... */
}

如何摆脱图片下方/旁边的空白区域？如果需要更多信息，请告诉我。

Answer 1

删除这条css规则就行了

#imageModalBody {
   overflow: auto;
}

查看结果https://jsfiddle.net/xs57dy60/