css - div 中的固定宽高比，无论屏幕如何

Question

我有一个 div，无论屏幕尺寸和比例如何，我都希望保持 2:1 的纵横比。

这是我的选择(放弃之前的其他选项)

.mydiv{

    background-color: red;
    width: 100%;
    position: absolute;
    height: 50%;
}

<div class="mydiv">
    this should be a fixed aspect ratio div
  </div

我试过媒体查询和这个:https://www.w3schools.com/howto/howto_css_aspect_ratio.asp但这不是我要找的，因为有白色的填充空间

Answer 1

设置left和top属性.mydiv 到 0 并将 margin:0 设置为 body 以删除多余的空间。

堆栈片段

body {
  margin: 0;
}

.mydiv {
  background-color: red;
  width: 100%;
  position: absolute;
  height: 50%;
  left: 0;
  top: 0;
}

<div class="mydiv">this should be a fixed aspect ratio div
  </div

希望对您有所帮助!