如何缩放 div 以适应浏览器视图端口，但保留 div 的纵横比。我如何使用 CSS 和/或 JQuery 做到这一点？
谢谢！
缩放 div 以适应窗口但保留纵横比
IT技术
javascript
jquery
css
html
2021-02-20 02:43:01
6个回答
您不需要为此使用 javascript。您可以使用纯 CSS。
padding-top 百分比是相对于包含块的宽度来解释的。将它与 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将摆脱它。
感谢这篇文章的提示！
另一种方法依赖于这样一个事实，即当您仅调整图像的宽度或高度时，浏览器会尊重图像的纵横比。（为了演示目的，我会让 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;
}
感谢 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;
}
这对我来说现在适用于笔记本电脑和手机屏幕尺寸。
我有一种不同的纯 HTML/CSS 方法，它不依赖于填充或绝对定位。相反，它使用em单位并依赖于CSS min() 函数加上一点数学。
想象一下，我们想要一个纵横比为 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;
}
您可以在此处的示例 JSFiddle 中对此进行试验。
秘诀就在体内font-size。它应该设置为min(1vw, Avh)，其中A是您希望 div 具有的纵横比，即width / height。在上面的例子中，我们使用 1.778，大约是 16 / 9。
在 CSS 中，em单位基于font-size元素的 ，如果未明确设置，则从父元素继承。对于您的视口 div，将widthto 100em(NOT rem) 和heightto 设置为Iem，其中I以百分比表示的纵横比的倒数，即100 / A或100 * height / width。在上面的示例中，我们使用 56.25，即 100 * 9 / 16。
这种方法的一个好处是所有嵌套元素也可以使用em单位，以便它们始终与视口的大小精确缩放。您可以p在示例中的元素上看到它的使用。
请注意，作为上述的替代方案，您可以在html元素上设置字体大小并rem在任何地方使用单位。CSSrem单位类似于em单位，但始终相对于根元素的font-size.
这可以通过 JQuery 和一些数学来实现。
使用 JQuery 获取视口宽度和高度以及 div 当前尺寸。
$(document).width();
计算 div 当前的纵横比。例如宽度/高度
你需要一点逻辑来确定是先设置宽度还是高度，然后使用初始比例来计算另一边。
jQuery 有一个插件，可以使对象增长，直到它的一侧达到某个 px 值。耦合这将视口的高度，您可以将任何元素扩展到该大小：jQuery MaxSide。
其它你可能感兴趣的问题