высота div не установлена ​​должным образом после вращения содержащегося изображения - PullRequest
Новая
       10

высота div не установлена ​​должным образом после вращения содержащегося изображения

0 голосов
/ 27 июня 2018

Я использую модальный бутстрап, и у меня есть требование показывать картинки в модальном теле. Ширина и высота изображения меняются. У меня также есть требование, чтобы иметь возможность увеличивать / уменьшать и поворачивать фотографии на 90 ° влево / вправо. Таким образом, модальный размер также меняется, в зависимости от текущего размера изображения и поворота.

Контейнер изображения сам определил минимальную и максимальную ширину и высоту, чтобы модал оставался на экране. Обработка переполнения для контейнера изображения является обязательной, поскольку размеры изображения могут быть больше, чем упомянутые выше минимальная / максимальная модальная ширина / высота. И вы должны быть в состоянии увидеть или хотя бы прокрутить любую часть изображения.

Масштабирование работает нормально, проблема возникает, когда происходит вращение. Изображение поворачивается, как и ожидалось, но высота контейнеров изображения (#imageModalBody) по-прежнему равна высоте до поворота, несмотря на то, что я установил ее на точное значение px в функции setImageContainerDimensions. И это оставляет кучу пустого места под картинкой. (Это также верно и в обратном случае -> если ширина исходного изображения> высота, то после поворота пустое пространство будет справа от изображения)

функционально идентичный 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}">`);
    },
    /* ... */
}

Как мне избавиться от пустого пространства ниже / рядом с картинкой? Если потребуется дополнительная информация, пожалуйста, дайте мне знать.

1 Ответ

0 голосов
/ 27 июня 2018

Просто удалите это правило CSS 

#imageModalBody {
   overflow: auto;
}

Посмотреть результат https://jsfiddle.net/xs57dy60/

...