Поворот изображений с помощью jQuery ... Но изменение размера не работает

Question

Поворот изображений с помощью jQuery ... Но изменение размера не работает

0

У меня есть изображение, которое нужно повернуть. Это изображение ориентировано либо на пейзаж, либо на портрет.

У меня есть форма HTML5, чтобы принимать степени вращения с шагом 90 каждый клик. Когда это значение изменяется, изображение должно вращаться и изменять размер. Он должен всегда иметь ширину 770 пикселей, но может быть такой же высокой, как и должен быть.

Я написал следующий обработчик событий, но он не работает так, как я ожидал.

Случай использования. Когда изображение является портретом, его начальные значения составляют 770x1027 (шхх). При повороте на 90 градусов, я ожидал бы, что функция ниже поворачивает изображение, задает ширину = 1027 и height = 770. Но я вижу, что ширина и высота установлены на 770. Что я не вижу?

$("#degrees").change(function(){
    var element$ = $("#photo-submission"),
        w = element$.width(), 
        h = element$.height(),
        deg = $(this).val();


    element$.removeAttr("style").attr({
        "style": "-webkit-transform:rotate("+ deg +"deg); width: "+ h +"px; height: "+ w + "px;"
    })
});

Chris Geirman 14 нояб. 2013, в 19:07

Источник

1

"width:" + h ?
Jason Nichols 14 нояб. 2013, в 17:39
0

да, если изначально w = 770, h = 1027 ... когда я поворачиваю на 90 градусов, мне нужно изменить размер изображения так, чтобы оно по-прежнему было не шире, чем 770, но, поскольку оно теперь на боку, высота изображения - это наша визуальная ширина. Смешение? Я знаю, что ты чувствуешь.
Chris Geirman 14 нояб. 2013, в 17:52
0

так что вы просто хотите масштабировать, если degrees % 180 == 90 ?
Jason Nichols 14 нояб. 2013, в 18:02

Показать ещё 1 комментарий

Теги:

javascript

jquery

css

rotation

2 ответа

Ещё вопросы

да, если изначально w = 770, h = 1027 ... когда я поворачиваю на 90 градусов, мне нужно изменить размер изображения так, чтобы оно по-прежнему было не шире, чем 770, но, поскольку оно теперь на боку, высота изображения - это наша визуальная ширина. Смешение? Я знаю, что ты чувствуешь.
так что вы просто хотите масштабировать, если degrees % 180 == 90 ?

adeneo · Answer 1 · 2013-11-14T16-38-00.000Z

Как пробовать его с помощью метода jQuery, фактически сделанного для изменения свойств CSS, таким образом было бы легче отслеживать ваши переменные и помещать их в нужные места:

$("#degrees").change(function(){
    var el  = $("#photo-submission"),
        w   = el.width(), 
        h   = el.height(),
        deg = this.value;

    el.css({
        '-webkit-transform' : 'rotate(' +deg+ 'deg)',
        width  : w,
        height : h
    });
});

FIDDLE

Реальное преимущество этого заключается в том, что вам не нужно устанавливать ширину и высоту того, что уже есть, что в основном является тем, что вы делаете, поэтому этого достаточно

$("#degrees").change(function(){
    $("#photo-submission").css({
        '-webkit-transform' : 'rotate(' + this.value + 'deg)'
    });
});

Спасибо за ваш JSFiddle, но он показывает квадратное изображение. Это было бы довольно просто. Я пытаюсь работать с прямоугольным изображением, следя за тем, чтобы верхний левый угол изображения всегда находился в верхнем левом углу его контейнера и никогда не превышал 770.
Я совсем не понимаю, вы получаете высоту и ширину элемента и устанавливаете высоту и ширину равными одинаковым значениям для одного и того же элемента, что это меняет?
О, теперь я понимаю, и я считаю, что это намного сложнее, чем это, если вы пытаетесь сохранить аспект и положение изображения при вращении. Вы, вероятно, должны взглянуть на источник преобразования, а матрица преобразования, которую rotate () - это сокращение.
Да, ты понял. Извините, я не очень хорошо это объяснил. Спасибо за подсказки, сейчас я собираюсь разобраться в этом.

sushain97 · Answer 2 · 2013-11-14T14-49-00.000Z

Кажется, вы изменили свою ширину и высоту.

element$.removeAttr("style").attr({
    "style": "-webkit-transform:rotate("+ deg +"deg); width: "+ w +"px; height: "+ h + "px;"
})