調整大小和CSS

旋轉代碼：調整大小和CSS

<html> 
<style> 
    body { 
    height: 4in; 
    width: 6in; 
    margin: 0; 
    padding: 0.1in; 
} 

.rotate90 { 
    -webkit-transform: rotate(90deg); 
    -moz-transform: rotate(90deg); 
    -ms-transform: rotate(90deg); 
    -o-transform: rotate(90deg); 
    transform: rotate(90deg); 
} 

.outer { 
    width: 100%; 
    height: 100%; 
} 

.image { 
    width: 100%; 
    height: 100%; 
    background:url('some-image') center center no-repeat; 
    background-size: contain; 
} 
</style> 
<body> 
<div class="outer"> 
    <div class="image rotate90"></div> 
</div> 
</body> 
</html>

這樣做的目的是設置圖像爲背景，以填補儘可能的4x6的區域。如果它是一張比它的高度寬的圖片，那麼所有的圖片都可以像我喜歡的那樣工作，但是如果它的高度大於它的寬度，它會在旋轉它之前改變它的大小，這會使圖片比我的圖片小得多，尋找。有什麼辦法可以做到這一點？

來源

2016-06-28 TiggerToo

包括一些JavaScript：

var img = document.getElementById('imageid'); //or however you get a handle to the IMG  
var width = img.clientWidth; 
var height = img.clientHeight; 

If(width > height) { 
    $('#imageId').addClass('rotate90'); 
}

這將有助於只旋轉必要的圖像（其寬度較大），而其他人將被放在與原始尺寸。

來源

2016-06-28 20:06:00

嘗試圖像類之前應用旋轉類

來源

2016-06-28 19:49:02 user31415

我試過改變順序並嵌套它們，但是不行。 – TiggerToo

調整大小和CSS

回答

相關問題