CSSの変換と最大高さ

Question

私はCSSの最大高さと最大幅を設定した画像を持っています

私は画像を回転させるためのリンクを追加しました。

ので、jQueryのコードは

rotate = rotate - 90; 
$("#thumbnail1").css('transform','rotate(' + rotate + 'deg)'); 

この部分の作品、

しかし、それが回転するとき、それはここでの最大の高さ

は現在、何が起こるかを示すスクリーンショットで無視するようになります

私が起こりたいのは、画像が背景の枠の外にあってはならないということです。以下

あなたはdiv要素を.thumbnailするCSSプロパティ Overflow:hiddenを適用する必要があり、関連するコードとCSS

.thumbouter { 
 
    width: 191px; 
 
    height: 145px; 
 
    margin-right: 5px; 
 
    margin-bottom: 35px; 
 
} 
 

 
.thumbouter .thumbnail { 
 
    margin-bottom: 0px; 
 
} 
 
.thumbnail { 
 
    width: 191px; 
 
    height: 146px; 
 
    position: relative; 
 
} 
 
.thumbnail { 
 
    display: block; 
 
    padding: 4px; 
 
    margin-bottom: 20px; 
 
    line-height: 1.42857143; 
 
    background-color: #fff; 
 
    border: 1px solid #ddd; 
 
    border-radius: 4px; 
 
    -webkit-transition: border .2s ease-in-out; 
 
    -o-transition: border .2s ease-in-out; 
 
    transition: border .2s ease-in-out; 
 
} 
 

 
#thumbnail1 { 
 
    display: block; 
 
    max-width: 182px; 
 
    max-height: 137px; 
 
    overflow: hidden; 
 
}

<div class="thumbouter pull-left"> <span class="thumbnail"> <img id="thumbnail1" src="1467075448.jpg" data-holder-rendered="true" style="display: block;"> </span><span class="rotate-left" data="1">L</span><span class="rotate-right" data="1">R</span></div>

jsFiddle here

Answer 1

。 ; `` .thumbnail`で隠された：あなたは `オーバーフローを追加しようとすることができます

var maxWidth = $("#thumbnail1").css('max-width'); 
var maxHeight = $("#thumbnail1").css('max-height'); 
rotate = rotate - 90; 
$("#thumbnail1").css({ 
    'transform':'rotate(' + rotate + 'deg)', 
    'max-width': maxHeight, 
    'max-height': maxWidth 
}); 

Answer 2

です。あなたが90度回転するとき、あなたはあなたのイメージが今横になっているため、代わりにmax-heightの、コンテナの高さに合わせてmax-widthを設定するためですフィドル次

チェック、

JSFiddle Here