Вопрос: Br /> Я работаю над модалом, где изображение можно вращать на 90 градусов каждый раз, когда пользователь нажимает кнопку. Проблема, с которой я сталкиваюсь, заключается в том, что когда изображение повернуто до 90 ° или 270 °, его часть отключается, даже если я установил переполнение: Авто на контейнере. < /P>
Что Я ожидаю: < /p>
Полное изображение всегда должно быть видно внутри модала.
При необходимости модал должен динамически регулировать его размер. , прокрутки должны появляться вместо того, чтобы отрезать изображение.
При вращении 90 ° и 270 °, части изображения не видны.
Модальный размер не регулируется должным образом, чтобы соответствовать повернутому изображению. < /p>
@if (Model.Count > 0)
{
int counter = 1;
foreach (var item in Model)
{
var imgpath = item.ImageUrl + "?var=" + DateTime.Now.Ticks;
@counter / @Model.Count
@* @item.ImageName*@
counter++;
}
}
❮
❯
< /code>
.mySlides .text {
background: rgba(0, 0, 0, 0.2);
}
.mySlides img {
max-width: 100%;
/*max-height: 400px;*/
}
.rotate-button {
max-width: 5.5%;
margin-left: 79%;
margin-top: 5px;
cursor: pointer;
}
.img-rotation {
align-items: center;
display: block;
overflow: auto;
max-height:360px;
padding: 0 60px;
width: 100%;
}
.img-rotation img {
/*height: 220px;*/
}
< /code>
$(function () {
var images = [];
var imageObj = {};
var angle = [];
for (let i = 0; i < @Model.Count; i++) {
angle.push(0);
}
$('.rotation-icon').click(function () {
$('#saveRotateImage').prop('disabled', false);
$('#saveRotateImage').addClass('toggleRotate');
const imageid = $(this).data('id');
$(`#hdn-isRotate-${imageid}`).val(1);
angle[imageid - 1] = (angle[imageid - 1] + 90) % 360;
$(`#imageToRotate-${imageid}`).css('transform', 'rotate(' + angle[imageid - 1] + 'deg)');
$(`#hdn-angle-${imageid}`).val(angle[imageid - 1]);
})`
Подробнее здесь: https://stackoverflow.com/questions/794 ... and-jquery