Question

我在bootstrap 3面板上有一系列图像（大屏幕每行3个）。

当你点击一个图像时，我设置它，以便它应用一个CSS类，它在图像上执行'scale（2）'，这一切都很好，但我希望这些图像可见并自我缩放在屏幕上。

第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（减去实际创建每个'main-image-panel'面板的knockoutjs代码。

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

Answer 1

Just an idea tried to resolve your issue. I used different tranform-origin based on child element index value as like nth-child,

$('.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'
      });
    }
  });

Find this 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; }

如果我可以让它真正进入视口的中心，那就太好了，但是这已经足够了，现在它看起来更加整洁，因为它不会在屏幕边缘。

css变换比例保持在屏幕上

3 个答案: