Question

我使用引导程序模态，并且要求在模态主体中显示图片。图像的宽度和高度是变化的。我还要求能够放大/缩小，以及将照片向左/向右旋转90°。因此，模态大小也会根据当前图片大小和旋转程度而变化。

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

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

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/

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

1 个答案: