缩放 div 以适应窗口但保持纵横比答案

【问题标题】：Scale a div to fit in window but preserve aspect ratio缩放 div 以适应窗口但保持纵横比
【发布时间】：2023-03-18 06:36:01
【问题描述】：

如何缩放 div 以适应浏览器视口但保留 div 的纵横比。如何使用 CSS 和/或 JQuery 做到这一点？

谢谢！

【问题讨论】：

我在这里提供了解决方案：stackoverflow.com/questions/643500/…
您能接受下面的答案吗？似乎很遗憾，一些非常好的答案不被接受
这个问题的答案没有一个能达到预期的效果。保持纵横比是微不足道的，但要使其成为正确的纵横比并始终适合或小于两个方向的可视区域则比较棘手。
最佳答案（来自 Danield）是最好的解决方案：stackoverflow.com/questions/20590239/…

标签： javascript jquery css html

【解决方案1】：

这可以通过 JQuery 和一些数学来实现。

使用 JQuery 获取视口的宽度和高度以及 div 当前的尺寸。

$(document).width();

计算 div 当前的纵横比。例如宽度/高度

你需要一点逻辑来判断是先设置宽度还是高度，然后用初始比例计算另一边。

【讨论】：

+1 用于提供简单的数学路由而不是插件路由。

【解决方案2】：

jQuery 有一个插件，它可以增长一个对象，直到它的一侧达到某个 px 值。将它与视口的高度相结合，您可以将任何元素扩展到该大小：jQuery MaxSide。

【讨论】：

【解决方案3】：

感谢 Geoff 提供有关如何构建数学和逻辑结构的提示。这是我的 jQuery 实现，我用它来调整灯箱的大小以填充窗口：

var height = originalHeight;
var width = originalWidth;
aspect = width / height;

if($(window).height() < $(window).width()) {
    var resizedHeight = $(window).height();
    var resizedWidth = resizedHeight * aspect;
}

else { // screen width is smaller than height (mobile, etc)
    var resizedWidth = $(window).width();
    var resizedHeight = resizedWidth / aspect;      
}

这对我来说现在在笔记本电脑和手机屏幕尺寸上都很好用。

【讨论】：

您对 height < width 的检查仅适用于 1:1 的纵横比。
几乎没有炼油厂，但你的 IF 没有检查正确的东西 var vw=$("#absoluteSized").width(); var vh=$("#absoluteSized").height(); var divAspect=vw/vh； if(divAspect > aspect) { resizedHeight = vh; resizedWidth = resizedHeight * 纵横比； } else { // 屏幕宽度小于高度（移动设备等） resizedWidth = vw; resizedHeight = resizedWidth / 纵横比； }

【解决方案4】：

您不需要 javascript。您可以使用纯 CSS。

padding-top 百分比相对于包含块 width 进行解释。将其与子元素上的 position: absolute 结合使用，您可以将几乎任何东西放在一个保持其纵横比的盒子中。

HTML：

<div class="aspectwrapper">
  <div class="content">
  </div>
</div>

CSS：

.aspectwrapper {
  display: inline-block; /* shrink to fit */
  width: 100%;           /* whatever width you like */
  position: relative;    /* so .content can use position: absolute */
}
.aspectwrapper::after {
  padding-top: 56.25%; /* percentage of containing block _width_ */
  display: block;
  content: '';
}
.content {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;  /* follow the parent's edges */
  outline: thin dashed green;            /* just so you can see the box */
}

display: inline-block 在.aspectwrapper 框的底部边缘下方留下一点额外空间，因此它下方的另一个元素不会与它齐平。使用display: block 将摆脱它。

感谢this post 的提示！

另一种方法依赖于这样一个事实，即当您仅调整图像的宽度或高度时，浏览器会尊重图像的纵横比。（我会让 google 生成一个 16x9 的透明图像用于演示目的，但实际上您会使用自己的静态图像。）

HTML：

<div class="aspectwrapper">
  <img class="aspectspacer" src="http://chart.googleapis.com/chart?cht=p3&chs=160x90" />
  <div class="content">
  </div>
</div>

CSS：

.aspectwrapper {
  width: 100%;
  position: relative;
}
.aspectspacer {
  width: 100%; /* let the enlarged image height push .aspectwrapper's bottom edge */
}
.content {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
  outline: thin dashed green;
}

【讨论】：

你能举一个 jsFiddle 例子，用第一种方法调整大小吗？我不太明白如何使用您的第一种方法来完成。
这里是：jsfiddle.net/ks2jH/1 请注意，使其成为完美框的关键是padding-top: 100%，这意味着高度应该是.aspectwrapper 宽度大小的100%。由于该宽度设置为 50%，因此它将随其父级调整大小。我还添加了overflow: hidden，因此文本不会在小尺寸时使框变形。
如果你想要一个长宽一半的矩形，你可以使用padding-top: 50%。在上面的示例中，我使用padding-top: 56.25% (9/16 = 56.25%) 制作了一个 16:9 的矩形，适用于宽屏视频。
太好了，谢谢！您应该更新您的答案以包含此测试页
这似乎只是根据宽度调整大小。所以它不会调整 div 的宽度以适应高度。所以它并不是真正适合视口，而只是很无聊，很容易实现长宽比维护。

【解决方案5】：

我有一个不同的纯 HTML/CSS 方法，它不依赖于填充或绝对定位。相反，它使用em 单位并依赖CSS min() function 加上一点数学。

想象一下，我们想要一个纵横比为 16:9 的视口 div，它始终适合浏览器窗口，并以轴为中心，有多余的空间。以下是我们如何做到这一点：

HTML

  <body>
    <div class="viewport">
      <p>
        This should be a 16:9 viewport that fits the window.
      </p>
    </div>
  </body>

CSS

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: white;
  font-size: min(1vw, 1.778vh);
}

div.viewport {
  width: 100em;
  height: 56.25em;
  background-color: lightblue;
}

div.viewport > p {
  font-size: 3em;
  text-align: center;
}

您可以在a sample JSFiddle here 中进行实验。

秘诀就在身体font-size。它应该设置为min(1vw, Avh)，其中A 是您希望div 具有的纵横比，即width / height。在上面的示例中，我们使用 1.778，大约是 16 / 9。

在 CSS 中，em 单位基于元素的 font-size，如果未显式设置，则从父元素继承。对于您的视口 div，将 width 设置为 100em（不是 rem）并将 height 设置为 Iem，其中 I 是表示为百分比的纵横比的倒数，即 100 / A 或 @ 987654338@。在上面的示例中，我们使用 56.25，即 100 * 9 / 16。

这种方法的一个好处是您的所有嵌套元素也可以使用em 单位，以便它们始终根据视口的大小精确缩放。您可以在示例中的 p 元素上看到它。

请注意，作为上述的替代方法，您可以在html 元素上设置字体大小并在任何地方使用rem 单位。 CSS rem 单位类似于em 单位，但总是相对于根元素的font-size。

【讨论】：

【解决方案6】：

Javascipt：

//Responsive Scaling
let outer = document.getElementById('outer'),
wrapper = document.getElementById('wrap'),
maxWidth  = outer.clientWidth,
maxHeight = outer.clientHeight;

window.addEventListener("resize", resize);
resize();

function resize(){
let scale,
width = window.innerWidth,
height = window.innerHeight,
isMax = width >= maxWidth && height >= maxHeight;

scale = Math.min(width/maxWidth, height/maxHeight);
outer.style.transform = isMax?'':'scale(' + scale + ')';
wrapper.style.width = isMax?'':maxWidth * scale;
wrapper.style.height = isMax?'':maxHeight * scale;
}

HTML：

<div id="wrap">
<div id="outer">
{{ fixed content here }}
</div>
</div>

样式：

/* Responsive Scaling */
#wrap {
  position: relative;
  width: 1024px;
  height: 590px;
  margin: 0 auto;
}
#outer {
  position: relative;
  width: 1024px;
  height: 590px;
  transform-origin: 0% 0%;
  overflow: hidden;
}

【讨论】：