javascript - 我如何在没有js的情况下在css中获得宽度

Question

有没有办法只在 css 中检索元素的宽度，而不使用 javascript。我知道如何使用 document.getElementsById("iframe").offsetWidth 并将其设置为重复运行。

var video = document.getElementsByClassName("video");
var ratio = 16/9;
var milliseconds = 100;

setInterval(function(){
  IframeSizeRatioFix(video, ratio);
}, milliseconds);

function IframeVideoFix(video, ratio){
  for(i = 0; i < video.length; i++){
    video[i].style.height = video[i].offsetWidth/ratio;
  }
}

但即使我将毫秒设置为 1 或 0.001，浏览器也无法处理这个速度并跳过更新，并且当用户调整窗口大小时，iframe 大小变化移动有点参差不齐，并且跳跃很多。我想知道是否有办法在 css 中使用 height: calc(100%/(16/9)); 函数，但 100% 似乎显示图像被压扁，并使用 100vw 只是将它拉伸(stretch)到页面，而不是容器(它也以与窗口不同的速率改变大小)。

有没有办法在 css 中获取元素宽度？或者，一种可以更快地更新 javascript 而不会受到浏览器不支持的速度的方法？

Answer 1

这似乎有效。我只是把它放在 window.onresize 上，我会保留它以防其他人发现它有帮助。

var video = document.getElementsByClassName("video");
var ratio = 16/9;

window.onresize = IframeVideoFix;

function IframeVideoFix(){
  for(i = 0; i < video.length; i++){
    video[i].style.height = video[i].offsetWidth/ratio;
  }
}

setTimeout(IframeVideoFix, 500);