如何在JS中旋轉後改變圖像的CSS？

有一個很好的css技巧，始終將圖像放在div的中心，而不管圖像大小或縱橫比如何。如何在JS中旋轉後改變圖像的CSS？

<style> 
.img_wrap { 
    padding-bottom: 56.25%; 
    width: 100%; 
    position: relative; 
    overflow: hidden; 
} 
#imgpreview { 
    display: block; 
    max-height: 100%; 
    max-width: 100%; 
    width: auto; 
    height: auto; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 
</style> 
<div class="img_wrap"> 
    <img id="imgpreview" src="http://i.imgur.com/RRUe0Mo.png" alt="your image" /> 
</div>

然後我說jQuery代碼用於旋轉圖像

$(document).ready(function(){ 
    var rotation = 0; 

    jQuery.fn.rotate = function(degrees) { 
     $(this).css({'-webkit-transform' : 'rotate('+ degrees +'deg)', 
        '-moz-transform' : 'rotate('+ degrees +'deg)', 
        '-ms-transform' : 'rotate('+ degrees +'deg)', 
        'transform' : 'rotate('+ degrees +'deg)'}); 
    }; 

    $('#imgpreview').click(function() { 
     rotation += 90; 
     $(this).rotate(rotation); 
     // $(this).toggleClass("imgpreview"); 
    }); 
});

然而，當我旋轉圖像，它就會被裁剪。我想避免這種情況。

我試圖玩addClass功能，但沒有成功。如果有人可以建議任何解決方案將會升值很多。

我爲此問題創建了jsfidlle。這裏updated小提琴

來源

2016-11-23 Kārlis Janisels

刪除'溢出：隱藏;'從.IMG換行，它不會裁剪 –

對不起，我沒有正確解釋這個問題。我的意思是我想要旋轉的圖像採取img_wrap大小。在這種情況下，原始圖片是橫向導向的，所以旋轉90度時，我希望它在寬度上「縮小」，這樣寬度將採用img_wrap高度的值。 –

請注意'img_wrap'具有零高度 - 它具有的任何高度都來自'padding-bottom' – kukkuz

所以這是我做過什麼對你的代碼：

刪除了overflow: hidden爲img_wrap 。

在JS我這樣做：

$('.imgpreview').click(function() { 
    rotation += 90; 
    rotation %= 360; 
    $(this).rotate(rotation); 

    // when rotation is 90 or 270 
    if ((rotation/90) & 1) { 
     $(this).css({ 
     'width': $('.img_wrap').innerHeight(), 
     'max-height': $('.img_wrap').innerWidth() 
     }); 
    } else { 
     $(this).css({ 
     'width': 'auto', 
     'max-height': '100%' 
     }); 
    } 
    });

注意，width/height計算調用rotate功能後進行。 旋轉之後，width是height，反之亦然爲imgpreview，所以我們必須讓height而設置的imgpreviewwidth調整 - 因此max-height風格調整。

請參見下面的演示：

$(document).ready(function() { 
 
    var rotation = 0; 
 

 
    jQuery.fn.rotate = function(degrees) { 
 
    $(this).css({ 
 
     '-webkit-transform': 'rotate(' + degrees + 'deg)', 
 
     '-moz-transform': 'rotate(' + degrees + 'deg)', 
 
     '-ms-transform': 'rotate(' + degrees + 'deg)', 
 
     'transform': 'rotate(' + degrees + 'deg)' 
 
    }); 
 
    }; 
 

 
    $('.imgpreview').click(function() { 
 
    rotation += 90; 
 
    rotation %= 360; 
 
    $(this).rotate(rotation); 
 

 
    // when rotation is 90 or 270 
 
    if ((rotation/90) & 1) { 
 
     $(this).css({ 
 
     'width': $('.img_wrap').innerHeight(), 
 
     'max-height': $('.img_wrap').innerWidth() 
 
     }); 
 
    } else { 
 
     $(this).css({ 
 
     'width': 'auto', 
 
     'max-height': '100%' 
 
     }); 
 
    } 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
} 
 
.img_wrap { 
 
    width: 100%; 
 
    position: relative; 
 
    border: 3px solid black; 
 
    padding-bottom: 56.25%; 
 
    /*overflow: hidden;*/ 
 
} 
 
.imgpreview { 
 
    display: block; 
 
    max-height: 100%; 
 
    max-width: 100%; 
 
    width: auto; 
 
    height: auto; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    margin: auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div class="img_wrap" id="P"> 
 
    <img class="imgpreview" id="Pim" src="https://3.bp.blogspot.com/-W__wiaHUjwI/Vt3Grd8df0I/AAAAAAAAA78/7xqUNj8ujtY/s1600/image02.png" alt="your image" /> 
 
</div> 
 
<br/> 
 
<div class="img_wrap"> 
 
    <img class="imgpreview" src="http://i.imgur.com/RRUe0Mo.png" alt="your image" /> 
 
</div>

來源

2016-11-23 10:26:06 kukkuz

雖然這是一個偉大的實施它不適合我。包裝在BS模式內。如果使用vh，則圖像超出模態。我用我的解決方案更新了Fidlle - 訣竅是使用'innerHeigt（）'而不是'heigt（）'。我可以問你在代碼中這行'rotation％= 360;'的用途是什麼？ –

當然，我設置'100vh'只是爲了說明......'rotation％= 360'確保變量'rotation'總是從'0'到'360'的範圍內 – kukkuz

您可以替換'img_wrap'中的'100vh' CSS和在JS代碼中的容器高度的值，這聽起來不錯？ – kukkuz

您可以使用jQuery通過改變一點點你的代碼實現這一點：

$('#imgpreview').click(function() { 
    if (rotation === 360) { 
     rotation = 0 
    } else { 
     rotation += 90; 
    } 
    $(this).rotate(rotation); 
    if(rotation === 90 || rotation === 270) { 
     $('.img_wrap').css('height', $(this).width()); 
    } else { 
     $('.img_wrap').css('height', 'auto'); 
    } 
});

有可能改變你的CSS也需要，但是這取決於什麼是你想要的最終結果具有。

來源

2016-11-23 09:47:11

謝謝您的回答，它非常有用。我已經上調了小提琴的最終結果！ –

很高興我幫助:)一些接受和upvoting將是可怕的;） –

有很多方法可以做到這一點。
下面的jQuery確定它是否是垂直的。
你只需要這一行添加到你的函數（度）

((degrees/90) == 1 || (degrees/90) == 3)? $(this).css('width','56.25%'):$(this).css('width','auto');

Jsfiddle

來源

2016-11-23 10:08:24

如何在JS中旋轉後改變圖像的CSS？

回答

相關問題