主页 / 问题 / 931059
Accepted
Shperung
Asked:2020-01-12 00:30:19 +0000 UTC2020-01-12 00:30:19 +0000 UTC

在 CSS 中以 16/9 宽高比阻止

  • 772

有一些块。如何设置它的宽度和高度，以便在调整窗口大小时，块始终保持 16/9 的比例？

* {
  margin: 0;
  padding: 0;
}

section {
  height: 100%;
  width: 100%;
}

div {
  padding-bottom: 56.25%;
  position: relative;
}

div article {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: green;
}
<section>
  <div>
    <article></article>
  </div>
</section>

在这个版本中，如果块的高度太小，就会出现滚动，但是如何让块的高度是100%，而宽度却保持比例呢？

html

2 个回答

  1. Best Answer

    只需添加以 vh 表示的部分最大宽度。

    * {
  margin: 0;
  padding: 0;
}

section {
  height: 100%;
  width: 100%;
  max-width: calc(16 / 9 * 100vh);
}

div {
  padding-bottom: 56.25%;
  position: relative;
}

div article {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: green;
}
    <section>
  <div>
    <article></article>
  </div>
</section>

    • 5

  2. 如果我们正在谈论填充整个屏幕的高度，那么我可以建议：

    body {
  margin: 0;
}

article {
  background-color: green;
  height: 100vh;
  width: 177.7777777777777778vh;
}

@media all and (max-width: 177.7777777777777778vh) {
  article {
    height: calc(100vh - 17px);
    width: calc(177.7777777777777778vh - 30.22222222222222px);
  }
}

/* Soft transition for scrollbar placement */
/* Does NOT work in Chrome 71, works in FF 64 */
@media all and (min-width: calc(177.7777777777777778vh - 30.22222222222222px)) and (max-width: 177.7777777777777778vh) {
  article {
    height: 56.25vw;
    width: 100vw;
  }
}
    <article></article>

    • 2

相关问题