缩放div以适应窗口，但保留宽高比
如何缩放div以适应浏览器视图端口，但保留div的纵横比。 我怎样才能使用CSS和/或JQuery做到这一点？
谢谢！
你不需要这个javascript。 你可以使用纯CSS。
填充顶部百分比相对于包含块宽度进行解释。 将其与绝对位置组合在一个子元素上，并且可以将任何东西放在保留纵横比的盒子中。
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生成一张16×9的透明图片，但实际上您会使用自己的静态图片。）
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提供关于如何构buildmath和逻辑的技巧。 这是我的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; }
目前，笔记本电脑和手机屏幕尺寸对我来说都很好。
这是可能的JQuery和一些math。
使用JQuery获取视图端口的宽度和高度以及divs的当前尺寸。
$(document).width();
计算divs当前的宽高比。 例如宽度/高度
您需要一些逻辑来确定是先设置宽度还是高度，然后使用初始比率来计算另一侧。
jQuery有一个增长对象的插件，直到其中一边到达某个px值。 耦合这将视口的高度，你可以展开任何元素的大小： jQuery MaxSide 。
