Question

我创建了一个简单的效果，可以使用CSS和jQuery在点击时旋转图像。到目前为止，这么好，但是当图像更宽时，我想将它保持在父div中（将它与旋转一起缩放）。

这是澄清我的问题的小提琴：http://jsfiddle.net/52pxbfcs/2/（只需点击要旋转的图片）。

＆＃13;

$(document).ready(function() {
    var angle = 90;
    $(document).on("click", "#parent", function() {	
        $("#img").css ({
            '-webkit-transform': 'rotate(' + angle + 'deg)',
            '-moz-transform': 'rotate(' + angle + 'deg)',
            '-o-transform': 'rotate(' + angle + 'deg)',
            '-ms-transform': 'rotate(' + angle + 'deg)',
        });
        angle+=90; 
    });
	
});

＆＃13;

#parent {
    width:140px;
    height:100px;
    border:2px solid #000;
    text-align:center;
}

#img {
     max-width:100%;
    max-height:100%;

	-webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;  
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent">
    <img src="http://i.ytimg.com/vi/nlobCS5Al8s/maxresdefault.jpg" id="img"/>
</div>

＆＃13;

谢谢，任何帮助都将不胜感激。

Answer 1

我摆弄你的小提琴，能够让我知道你想要它。基本上你需要检查图像是否垂直并设置max-height / wid并考虑边距偏移和边界。

现在还要修正以修复高度＆gt;宽度图像的边距

Updated fiddle

$(document).ready(function() {
var angle = 90;

$(document).on("click", "#parent", function() { 
    var normalOrientation = angle % 180 == 0;
    var w = $('#parent').width();
    var h = $('#parent').height();
    var iw = $('#img').width();
    var ih = $('#img').height();
    var border = parseFloat($('#parent').css('border-top-width').replace(/px/,''));
    var marginTop = border + ((Math.max(iw,ih) - Math.min(iw,ih))/2) - ((h - ih)/2);
    $("#img").css ({
        '-webkit-transform': 'rotate(' + angle + 'deg)',
        '-moz-transform': 'rotate(' + angle + 'deg)',
        '-o-transform': 'rotate(' + angle + 'deg)',
        '-ms-transform': 'rotate(' + angle + 'deg)',
        maxHeight : normalOrientation ? '100%' : w,
        maxWidth : normalOrientation ? '100%' : h,
        marginTop: normalOrientation || ih === iw ? 0 : ih > iw ? 0 - marginTop : marginTop
    });
    angle+=90; 
});

});

Answer 2

尝试使其适用于任何可能的图像，我添加了另一个元素，容器，有2个状态

#container {
    width: 140px;
    height: 100px;
    position: absolute;
        -webkit-transition: all .5s ease-out;
    -moz-transition: all .5s ease-out;
    -ms-transition: all .5s ease-out;
    -o-transition: all .5s ease-out;
    transition: all .5s ease-out;  
}

#container.rotated {
    width: 100px;
    height: 140px;
    top: 20px;
    left: 20px;
}

fiddle

Answer 3

您还可以向scale()属性添加transform并计算图片宽度和高度之间的比率。 看到这个小提琴： http://jsfiddle.net/52pxbfcs/25/

    // within the click function
    var ratio = 1,
        $img = $("#img"),
        $parent = $('#parent');

    if (angle === 90 || angle === 270) {
        ratio = $parent.width() / $img.height();
    }

CSS3 onclick旋转和缩放

3 个答案: