Javascript 缩放div以适应窗口，但保留纵横比

如何缩放div以适应浏览器视图端口，但保留div的纵横比。如何使用CSS和/或JQuery实现这一点

---

谢谢

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

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

$(document).width();

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

---

您需要一点逻辑来确定是先设置宽度还是高度，然后使用初始比率来计算另一侧。

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

感谢Geoff提供的有关如何构造数学和逻辑的技巧。下面是我的jQuery实现，我使用它来调整lightbox的大小，以便它填充窗口：

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;      
}

var height=原始高度；
变量宽度=原始宽度；
纵横比=宽度/高度；
如果（$（窗口）.height（）<$（窗口）.width（））{
var resizedHeight=$（window.height（）；
var resizedWidth=resizedHeight*纵横比；
}
否则{//屏幕宽度小于高度（移动等）
var resizedWidth=$（window.width（）；
var resizedHeight=resizedWidth/aspect；
}

---

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

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

填充顶部百分比是相对于包含块的宽度进行解释的。将它与子元素上的position:absolute结合起来，您可以将几乎任何东西放在一个保持其纵横比的框中

HTML:

display:inline块

在

.aspectwrapper

框的底部边缘下留有一点额外的空间，因此它下面的另一个元素不会与它齐平运行。使用

display:block

将消除它

谢谢你的提示

---

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

HTML:

---

+1用于提供简单的数学路线，而不是插件路线。您对

高度

的检查仅适用于高宽比为1:1的情况。这几乎不起作用，但您的IF没有检查正确的内容var vw=$（“#绝对大小”）.width（）；var vh=$（“#绝对大小”）.height（）；var=vw/vh；如果（divAspect>aspect）{resizedHeight=vh；resizedWidth=resizedHeight*aspect；}或者{//屏幕宽度小于高度（mobile等）resizedWidth=vw；resizedHeight=resizedWidth/aspect；}您能用第一种方法给出一个jsiddle示例，其中有一个完美的框（所有边都是euqal）来调整大小吗？我不太明白如何使用您的第一种方法来实现它。请注意，使它成为一个完美的盒子的关键是

填充顶部：100%

，这意味着高度应该是

.aspectwrapper

宽度的100%。由于该宽度设置为50%，它将与其父对象一起调整大小。我还添加了

overflow:hidden

，这样文本就不会在小尺寸时使框变形。如果您想要一个只有宽度一半高的矩形，可以使用

填充顶部：50%

。在上面的例子中，我使用

填充顶部：56.25%

（9/16=56.25%），制作了一个适合于宽屏幕视频的16:9矩形。太好了，谢谢！您应该更新您的答案，以包括此测试页面。这似乎只是根据宽度调整大小。因此，它不会调整div的宽度，以适应高度。所以它不是真正适合视口，而是相当无聊的旧的易于实现的纵横比维护。我在这里提供了解决方案：你能接受下面的答案吗？令人遗憾的是，一些非常好的答案没有被接受，这个问题的答案中没有一个能达到预期的结果。保留纵横比很简单，但要使其成为正确的纵横比，并且始终在两个方向上都适合或小于可视区域，则更为棘手。此处的顶部答案（来自Danield）是最佳解决方案：

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

.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 */
}

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

.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;
}