时间戳

首页 > 解决方案 > 如何重新调整连续旋转的元素以完全适合其（固定大小）容器？

css - 如何重新调整连续旋转的元素以完全适合其（固定大小）容器？

问题描述

我让（矩形）图像无限旋转。旋转时，我想调整它的大小（这样图像就不会被截断）。
换句话说：我尝试始终尽可能大地显示整个图像。

当前结果，被切断。

因此，“0 度”示例是正确的，但“80 度”示例更倾向于如下所示：

想要的结果。

您可能已经注意到，这是作为 StreamElements-widget 执行的。这可能是不起作用的原因overflow:visible。

HTML：

<div class="main-container">
    <img src="some_url">
</div>

CSS：

.main-container {
    width:100%;
    height:100%;
    
    overflow:visible;
    
    display: grid;
    place-items: center;
}

img {
    max-width: 100%;
    
    object-fit: contain;
    
    animation: spin 5s infinite linear;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

我认为这transform: ... scale(x)可能有效，但如果不使用固定的关键帧值（这似乎是一个不可靠的解决方案），我就无法做到这一点。

标签： cssrotationcss-animationsscale

解决方案

我认为如果没有 Javascript，您将无法完成此操作，并且还可以用 Javascript 而不是 CSS 转换元素。这是我的做法，我没有复制您的确切示例，我使用了 2 个简单的 div：一个容器，另一个在第一个容器中（而不是图像）；

const cont= document.querySelector('.main-container');
const rot= document.querySelector('.rotater');
const H= rot.offsetHeight, h= cont.offsetHeight;
const W= rot.offsetWidth;

var t=0;

var anim= setInterval(rotate, 20);
function rotate(){
    rot.style.transform= "rotate(-" + t + "deg)";
    update(t);
    t++;
}

function update(T){
    let alpha= Math.atan(H/W);
    let diagLength= Math.sqrt(
        Math.pow(H, 2) + Math.pow(W, 2));
    let theta= degToRad(T);
    theta= radTrunc(theta);
    theta= (theta> Math.PI/2 && theta< Math.PI) || (theta> 3*Math.PI/2 && theta< 2*Math.PI) ? Math.PI - theta : theta;
    let beta= (Math.PI/2) - (alpha + theta);
    let nonScaledHeight= Math.cos(beta) * diagLength;
    let ratio= Math.abs(h/nonScaledHeight);
    ratio= ratio> 1 ? 1 : ratio;
    rot.style.transform += " scale(" + ratio + ")";
}

function degToRad(angle){
 return angle * Math.PI / 180;
}

function radTrunc(angle){
    while(angle> (Math.PI * 2)){
        angle -= Math.PI*2;
    }
    return angle;
}
    .main-container{
        width: 600px;
        height: 200px;
        background: blue;
    }
    .rotater{
        width: 250px;
        height: 200px;
        background: green;
        margin: auto;
    }
<div class="main-container">
    <div class="rotater"></div>
</div>

您在函数中看到的所有计算update都是基本的三角函数，我们计算内部 div 旋转时nonScaledHeight的高度：该值与外部 div 高度的比率将是内部 div 的缩放比例。 degToRad将角度t从度数转换为弧度并radTrunc确保角度保持在范围内[0, 2*PI[。

推荐阅读