Question

如何缩放div以适应浏览器视图端口，但保留div的宽高比。我怎么能用CSS和/或JQuery做到这一点？

谢谢！

Answer 1

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

填充顶部百分比相对于包含块宽度进行解释。将它与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提示！

另一种方法依赖于以下事实：当您仅调整其宽度或高度时，浏览器会尊重图像的纵横比。（我会让谷歌生成一个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;
}

Answer 2

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

现在，笔记本电脑和手机屏幕尺寸对我来说效果很好。

Answer 3

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

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

$(document).width();

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

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

Answer 4

jQuery有一个插件可以生成一个对象，直到其中一个边达到某个px值。将视频的高度耦合，您可以将任何元素展开为该大小：jQuery MaxSide。

Answer 5

我有一种不同的纯 HTML/CSS 方法，它不依赖于填充或绝对定位。相反，它使用 library(ggplot2) ggplot(data=mydata, aes(x=doctor,fill=compliance)) + geom_bar(stat="count",width=0.4) + geom_text(stat='count',aes(label=..count..), vjust=-0.3) + expand_limits(y = c(0, 3)) + labs(y = NULL, x= NULL) + theme(legend.title = element_blank()) + scale_fill_manual(values = c("#00BFC4","#F8766D"), labels = c("Not found","Compliance")) 单位并依赖于 CSS min() function 加上一点数学。

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

HTML

em

CSS

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

您可以在 a sample JSFiddle here 中对此进行试验。

秘诀在于身体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; }。它应该设置为 font-size，其中 min(1vw, Avh) 是您希望 div 具有的纵横比，即 A。在上面的例子中，我们使用了 1.778，大约是 16 / 9。

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

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

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

缩放div以适合窗口但保留纵横比

5 个答案: