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只会将其拉伸到页面，而不是容器（更改大小的速度与窗口不同）。

有没有一种方法可以在CSS中获得元素的宽度？还是另外一种方法，可以更快地更新javascript，而不会被浏览器所不支持的速度？

Answer 1

这似乎有效。我只是将其放在window.onresize上，以防别人发现它有用。

?:

Answer 2

一个纯div的CSS示例，它基于宽度保持16：9的宽高比。

* {
  box-sizing: border-box;
}

.aspect-16-9 {
  position: relative;
  padding-bottom: 56.25%;
  overflow: hidden;
}

.aspect-content {
  position: absolute;
  width: 100%;
  height: 100%;
  
  /*and some styling*/
  padding: 15px;
  overflow-y: auto;
  background: #DDD;
}

<div style="width: 100%; max-width: 960px; padding: 20px;">
  <div class="aspect-16-9">
    <div class="aspect-content">
      Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by
      their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic
      life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli,
      but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown
      Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then
    </div>
  </div>
</div>

如何在没有js的css中获得宽度

2 个答案: