javascript - 保持 div 居中，保持宽高比并垂直或水平调整大小

Question

我可以找到多个半解决方案，但我正在寻找一个完整的解决方案来解决我的问题。我有一个 div，我想以固定的纵横比在屏幕上居中，该 div 本质上应该始终完全可见，以便 div 在保持纵横比的同时始终是最大的。无论垂直和水平调整窗口大小。

这里有一个代码笔:https://codepen.io/william-bang/pen/ZjyWRd

我创建的，这只能解决水平问题，不能解决垂直问题。我已经设法让它与 and 一起工作，但是为此调整大小的行为有所不同。我正在寻找 CSS 解决方案，尽管我对 JS 解决方案持开放态度，如果有人绝对确定不存在解决方案的话。

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

.wrapper {
  width: 40%;
  height: 100%;
  margin: auto
}

.img {
  padding-top: 50%;
  width: 100%;
  background: #ccc;
  text-align: center;
}

<div class="wrapper">

  <div class="img">
    **IMG HERE**
  </div>
  
</div>

如果有任何建议，我将不胜感激，这让我困惑了好几个小时。提前致谢:)

更新，div 需要在不同的页面上保持其纵横比，并始终保持其自身的最大尺寸。

@Grenther 感谢您的回复，我尝试修改您给出的答案以完全使用 CSS 而不必使用 CSS 预处理器。这真的很顺利，直到我意识到 CSS 媒体查询不支持标准 CSS 变量，否则你提出的方法在没有 SCSS 的情况下也是可行的，但也许你已经知道了。

:root {
  --ogW: 1600;
  --ogH: 900;
  --ratio: calc( var(--ogW) / var(--ogH));
}

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

.ratio {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  @media screen and (max-width: 177vh) {
    width: 90vw; 
    height: calc( 90vw / var(--ratio)); 
  } 

  @media screen and (min-width: 177vh) {
    width: calc( 90vh * var(--ratio));  
    height: 90vh;
  }

}

.div {
  width: 100%;
  height: 100%;
  background: red;
  text-align: center;
}

<div class="ratio">

  <div class="div">
    
    Hello!
    
  </div>
  
</div>

Answer 1

最终更新:

它变成了一个 SCSS 问题，对于可变宽度或高度的任何输入都可以这样完成:

http://jsfiddle.net/832v5f0L/41

 $div-width : 1600;
 $div-height : 900;

 $ratio: $div-width / $div-height;

  @media screen and (max-width: (100 * $ratio) + vh) {
    width: 100vw; // always 100vw to fill
    height: (100 / $ratio) + vw; // 100 / ratio
  }

  @media screen and (min-width: (100 * $ratio) + vh) {
    width: (100 * $ratio) + vh;  //100 * ratio
    height: 100vh; // always 100vh to fill
  }

更新的答案:

当宽度小于高度时，媒体查询纵向自动激活。这确保我们可以使用 vh 和 vw 来获得最大可能的大小而不会溢出。

宽度和高度之间的比例将确保您可以获得固定的纵横比。

    body {
  width: 100%;
  height: 100%;
}
.wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* 
100vh * (100 / height) 
with hright 50:
100vh * 100 / 50 = 200vh
*/

@media screen and (max-width: 200vh) {
  .wrapper {
      width: 100vw;
      height: 50vw;
  }
}
@media screen and (min-width: 200vh) {
  .wrapper {
      width: 200vh;
      height: 100vh;
  }
}

.img {
/*   padding-top: 50%; */
  width: 100%;
  height: 100%;
  background: #ccc;
  text-align: center;
  background-img: url()
}

<div class="wrapper">

  <div class="img">
    **IMG HERE**
  </div>
  
</div>

更新:最小 - 最大宽度查询