Я хочу повернуть изображение в модальном всплывающем окне (переполнение: автоматическое) с CSS и jQuery, я применяю некоJquery

Программирование на jquery
Ответить Пред. темаСлед. тема
Anonymous
 Я хочу повернуть изображение в модальном всплывающем окне (переполнение: автоматическое) с CSS и jQuery, я применяю неко

Сообщение Anonymous »

Когда изображение в вертикальном положении водяной знак (дата времени) не показывает должным образом] (https://i.sstatic.net/lolcendr.png)
Вопрос: 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
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Jquery»