css轉換比例保持屏幕上

我有一系列的圖像在屏幕上bootstrap 3面板（每行3大屏幕）。css轉換比例保持屏幕上

當你點擊一個圖像時，我已經設置了它，以便它應用一個在圖像上做'scale（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; 
    }

在點擊圖像上它添加/刪除 '變焦單擊' 類。

我已經嘗試過使用'translate'和'scale'，但是它是相對於圖像本身，也嘗試過使用'transform-origin'。

**更新：**已經創建表示它是如何在存在於的jsfiddle（減去其實際上創建每個「主圖像板」面板的knockoutjs代碼

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

來源

2017-08-22 Raymond Herring

當懸停時，圖像應該顯示出格外？或者我可以放大div裏面？ –

圖像從當前位置彈出，並縮放爲其當前大小的兩倍。此外，它只發生在你點擊圖片而不是你懸停的時候。 –

我用新的提琴手更新了我的答案。檢查一次。 –

剛一個想法設法解決您的問題。我使用了基於子元素的索引值像第n個孩子的不同變換分析，產地，

$('.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以供參考。

來源

2017-08-22 05:51:02

即使我沒有「行」div，這仍然工作嗎？從技術上講，我並不是很難限制它，我只是用'col-md-4'把div放到屏幕上，讓Bootstrap根據屏幕寬度確定它可以放到屏幕上的數量。儘管這是一個選項，但我可以將每3個div都包裝在一個row-div中，因爲我知道系統的這個特定部分永遠不會在移動設備上查看。 –

那麼你可以通過使用nth-child元素來實現它。在我的答案中找到更新提琴手。 –

這可能幫助，

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

} 您可以使用任何的高度/寬度你想要的。如果圖像包含在任何已定位的元素中，則可以使用position：fixed並且它仍然可以工作

來源

2017-08-22 07:02:08

找出它。我經常在更復雜的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; }

是很好，如果我能得到它真正進入視口的中心，但是這就夠了，現在看起來更整潔，它不是關閉在邊緣上的屏幕。

來源

2017-08-23 02:47:55

這一個我昨天建議自己的傢伙！ –

的確，你確實是這樣做的，儘管因爲當時我沒有做過一件非常好的事情，但是你提出的建議對我來說並沒有什麼意義，特別是因爲它不在正確的元素上（這是我的錯你的）。問題是我不能將你原來的那個標記爲答案，因爲它現在都用JS完成了。 –

css轉換比例保持屏幕上

回答

相關問題