40 html javascript css jquery
如何缩放div以适合浏览器视图端口,但保留div的宽高比.我怎么能用CSS和/或JQuery做到这一点？
谢谢!
ʇsә*_*ɹoɈ 43
你不需要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将摆脱它.
感谢这篇文章提示!
另一种方法依赖于以下事实:当您仅调整其宽度或高度时,浏览器会尊重图像的纵横比.(我会让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，它始终适合浏览器窗口，并且位于具有多余空间的轴中心。以下是我们如何实现这一目标：
超文本标记语言
<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（不是 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当前的宽高比。例如宽度/高度
您需要一些逻辑来确定是先设置宽度还是高度，然后使用初始比例来计算另一边。