css变换比例保持在屏幕上

Question

我在 bootstrap 3 个面板中显示了一系列图像（大屏幕每行 3 个）。

当您单击图像时，我对其进行了设置，以便它应用一个在图像上执行“缩放（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; 
  }

点击图片后，它会添加/删除“缩放点击”类。

我尝试过使用“平移”和“缩放”，但它与图像本身相关，也尝试过使用“变换原点”。

**更新：** 创建了一个 jsfiddle 来展示它目前的状态（减去实际创建每个“主图像面板”面板的 knockoutjs 代码。

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

Answer 1

想通了。有时我似乎总是对更复杂的 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; }

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

Answer 2

这可能会有所帮助，

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

} 你可以使用任何你想要的高度/宽度。如果图像包含在任何定位元素中，您可以使用 position: fixed 并且它仍然可以工作

Answer 3

只是一个想法试图解决您的问题。我根据子元素索引值使用了不同的 tranform-origin，例如 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'
      });
    }
  });

查找此fiddler 以供参考。