用比例旋转图像

时间:2014-08-25 14:03:43

标签: jquery image rotation resize

我想将图像从纵向翻转到横向。我的问题是我希望图像根据比例适合容器(我不想拉伸,而是保持比例) 。谁知道怎么做?在小提琴中,图像应放大以适应放置在风景中。我的宽度是动态的我认为设置宽度100%会修复它但它只在页面加载时有效

http://jsfiddle.net/FcQZm/114/

var landscape = false;

jQuery(document).ready(function($){
    $("button").click(function(){
        if(!landscape)
        {
            $("img#testimg").css( {
               '-webkit-transform' : 'rotate(270deg)',
                'width' : '100%'
            });
            landscape= true;  
         }
         else
         {
            $("img#testimg").css( {
              '-webkit-transform' : 'rotate(0deg)',
              'width' : '100%'
            });
            landscape= false; 
         }        
    });
});

感谢

1 个答案:

答案 0 :(得分:0)

试试这个:

DEMO NEW

    var landscape = false;

jQuery(document).ready(function($){
    $("button").click(function(){
        if(!landscape)
        {
            $("#testimg").css( {
               '-webkit-transform' : 'rotate(270deg)',

            });

            var cw = $('#testimg')[0].clientHeight;
$('#wrapper').css('width',cw+'px');

          landscape= true;  
        }
        else
        {
            $("#testimg").css( {
               '-webkit-transform' : 'rotate(0deg)',


            });
 var cw = $('#testimg')[0].clientHeight;
 var ch =  $('#testimg')[0].clientWidth;         
$('#wrapper').css('height',cw+'px');    $('#wrapper').css('width',ch+'px'); 
            landscape= false; 
        }        
    });
});