Question

我有一个div我想保持宽高比2：1，无论屏幕大小和比例是多少。

这是我的选择（放弃其他先前选项）

＆＃13;

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

＆＃13;

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

＆＃13;

我尝试了媒体查询，并且：https://www.w3schools.com/howto/howto_css_aspect_ratio.asp但由于白色填充空间而不是我正在寻找的

Answer 1

将 left 和 top 属性 .mydiv 设置为 {{1} 并将 0 设置为正文以删除额外空格。

Stack Snippet

margin:0

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

我希望这会对你有所帮助！

Answer 2

试试这个

.mydiv{

    background-color: red;
    width: 100vw;
    height: 50vh;
    position: absolute;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
}

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

Answer 3

您可以使用padding-bottom并根据所需比例选择百分比

＆＃13;

.mydiv{
    background-color: red;
    width: 100%;
    padding-bottom: 50%;
    position: absolute;
}

＆＃13;

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

＆＃13;

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

3 个答案: