は、サイズ変更や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>

ここでの意図は、4×6エリアのできるだけ多くを埋めるために背景として画像を設定することです。それは、高さよりも広い画像の場合、私はそれが欲しいのと同じようにすべて動作しますが、幅よりも大きな高さを持つと、回転前にサイズが変わります。探しています。この仕事をする方法はありますか？画像クラス

出典

2016-06-28 TiggerToo

前に回転クラスを適用

出典

2016-06-28 20:06:00

試みは、いくつかの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 19:49:02 user31415

私は順序を変更して入れ子にしてみましたが、そうではありません。 – TiggerToo

は、サイズ変更やCSS

答えて

関連する問題