滚动条与转换对象的实际边界不匹配

Question

我试图使用transform: rotate(45deg);来旋转html元素。这确实有效，但滚动条与旋转元素的视觉边界不匹配。

上下文是，我想创建一个PDF查看器应用程序，用户也可以旋转文件以获得更好的可读性。但是，他不可能滚动整个文件，因为滚动条不够长。

以this fiddle为例。滚动条太短，所以你不能滚动到每个角落。

我该如何解决这个问题，以便您可以滚动整个元素？

jQuery解决方案会很好。我在Chrome v.60中对此进行了测试。

Answer 1

因此，我认为，我们需要克服的两个主要问题是：

1. 图像比容器
2. 即使图像并不比容器大做大，只要它的旋转，因为对角之间的长度要长于图像

所以这里的基本方法是添加一个额外的div的#wrapper和里面的任何一个边的长度将是更大：

1. 使图像大小相同#wrapper
2. 确保新div足够大，甚至适合图像时，它的旋转

关键是要弄清楚如何大的内包装材料应该。这是黄金的旧款Pythagorean Theorem发挥作用。

使用一些数学，我们可以发现，对于500x300的图像，对角上的长度是583像素，并且有些变化。所以让我们将我们的新内部div设置为宽度和高度为​​。

<div id="wrapper" style="width: 500px; height: 300px;"> 
    <div id="content" style="width: 584px; height: 584px"></div> 
</div> 

然后，让我们确保将图像居中放置在内部div中，以便当它旋转时，它始终适合。

#content { 
    position: relative; 
} 
#content img { 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translateX(-50%) translateY(-50%); 
} 

从那里，因为的#content内的图像是完全尺寸#wrapper一样，我们理论上应该是好去。

不幸的是，就支持任意大小的图像或灵活的容器而言，此解决方案并不是非常灵活。由于我们在加法，减法，乘法和除法操作中受到限制，因此我们可以使用它来表达我们内部容器的大小（至少我可以提出），因此您不需要任何calc()表达式，因此您需要自己计算这个数字并使用固定值。但它确实工作，并希望您的用例是一个PDF查看器，您的图像将始终是相同的尺寸，所以你可以使其工作。

这里唯一需要澄清的障碍是图像在容器中不完全可见时不能完全显示，这有点奇怪。为此，我可能会尝试使用JavaScript将滚动位置#wrapper设置为与图像的左上角相匹配。我会把它留给你。

演示

$('#slider').on('input', function(){ 
 
    $('#content').css("transform", "rotate(" + $("#slider").val() + "deg)"); 
 
});

#wrapper { 
 
    padding: 0; 
 
    width: 500px; 
 
    height: 300px; 
 
    overflow: auto; 
 
} 
 
#content { 
 
    width: 584px; 
 
    height: 584px; 
 
    position: relative; 
 
} 
 
#content img { 
 
    width: 500px; 
 
    height: 300px; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translateX(-50%) translateY(-50%); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="wrapper"> 
 
    <div id="content"> 
 
    <img src="https://www.w3schools.com/css/img_lights.jpg"> 
 
    </div> 
 
</div> 
 
<input id="slider" type="range" min="0" max="360" step="1" value="0">

Answer 2

当发生html转换时，它独立于其他元素工作。这意味着一个变形的元素不会移动邻居或调整其父母。

您可以为图像的父级使用预定的填充。或者您可以在转换过程中更改它，但在这种情况下，您需要关注窗口滚动位置。

为90度旋转的元件所需要的填充取决于你要旋转和图像的更大的大小等于：

(biggerDimension - lesserDimension)/2

所以，你的jQuery函数来得到父母的正确填充有异曲同工之处这个抽象的：

var $img  = $('img'), 
    imgWidth = $img.width(), 
    imgHeight = $img.height(); 

if (imgWidth > imgHeight) { 
    var parentPadding = (imgWidth - imgHeight)/2; 
} else { 
    var parentPadding = (imgHeight - imgWidth)/2; 
} 

如果你的图像是方形的，当不需要填充（90deg旋转）。

但是，如果你想找到最大需要的填充（对于45deg，135deg等旋转），公式会有点复杂。 例如，如果最大尺寸的宽度和你想设置padding-top：

sqrt(imgWidth^2 + imgHeight^2)/2 - imgHeight/2 

半对角线减去一半的高度。当高度较大和其他角落时，可以更改案例的公式。

当然，如果img是响应式的，您需要在调整大小时调用该函数。