css transform scale on screen

Question

私は、ブートストラップ3パネル（大画面の場合は1行につき）で一連の画像を画面に表示しています。

イメージをクリックするとイメージに「スケール（2）」を行うCSSクラスが適用されるように設定されていますが、これは問題なく動作しますが、これらのイメージを表示して縮尺しますスクリーン上に自分自身。

列1の画像は左に少し画面外になり、列3の画像は右に少し画面外になります。列2の画像は大部分良好です。

理想的には、ビューポート自体の中心にスケールするか、少なくともオフスクリーンをレンダリングしないようにします。

CSSは：

.zoom {  
    -webkit-transition: all 0.35s ease-in-out;  
    -moz-transition: all 0.35s ease-in-out;  
    transition: all 0.35s ease-in-out;  
    cursor: -webkit-zoom-in;  
    cursor: -moz-zoom-in;  
    cursor: zoom-in; 
    } 

    .zoom-click { 
    -ms-transform: scale(2); 
    -moz-transform: scale(2); 
    -webkit-transform: scale(2); 
    -o-transform: scale(2); 
    transform: scale(2); 
    position:relative; 
    z-index:100; 
    border: 2px solid DarkRed; 
    } 

画像をクリックしたら、それは/が 'ズーム・クリック' クラスを削除し追加します。

私は 'scale'と一緒に 'translate'を使用しようとしましたが、画像自体に相対的です。また、 'transform-origin'を使って試しました。

**更新：**は、それが現在であるかを示すjsfiddle（マイナス実際には「主画像パネル」の各パネルを作成knockoutjsコードを作成した

https://jsfiddle.net/tczh1sxq/2/

Answer 1

だけアイデアはあなたの問題を解決することを試みた。私は、n番目の子などの子要素のインデックス値に基づいて異なるtranform-起源を使用し、

$('.child').click(function(){ 
    var index = $(this).index()+1; 
    if((index%3)==1){ 
     $(this).find('img').css({ 
     'transform': 'scale(2)', 
     'transform-origin': 'top left' 
     }); 
    } 
    else if((index%3)==2){ 
     $(this).find('img').css({ 
     'transform': 'scale(2)', 
     'transform-origin': 'top' 
     }); 
    } 
    else if((index%3)==0){ 
     $(this).find('img').css({ 
     'transform': 'scale(2)', 
     'transform-origin': 'top right' 
     }); 
    } 
    }); 

は参照用に、このfiddlerを検索します。

Answer 2

これは、

.zoom-click 
 
{ 
 
    position: absolute; 
 
    height: 50%; 
 
    width: 50%; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%,-50%); 
 
}

} あなたが望む任意の高さ/幅を使用することができますを助けるかもしれません。画像が任意の配置された要素内に含まれている場合は、position：fixedを使用できますが、それでも動作します。

Answer 3

私はいつもより複雑なCSSで難しいようです。とにかく

、やってそれを固定：今、それはオフではないことを、私はそれが実際にビューポートの中心部に入るために得ることができれば

#images > div .zoom-click { transform-origin: top; } 
    #images > div:nth-child(3n+0) .zoom-click { transform-origin: top right; } 
    #images > div:nth-child(3n+1) .zoom-click { transform-origin: top left; } 

がいいことが、これで十分だろう、ずっとすっきり見えます - 端にスクリーン。