我有一个带有max-width 的1000px 和max-height 的650px 的包装器div。
我想动态调整这个包装的宽度和高度，同时保持它的纵横比。如果重新调整浏览器窗口的大小以减小宽度，则应调整高度。如果高度降低，宽度应相应调整。
我正在使用 HTML5 和 CSS3。这是一种尝试创建适用于桌面和移动设备的响应式布局。
【问题讨论】：
标签： html css responsive-design aspect-ratio
这个怎么样：
div
{
width: 153.8vh; /* 100/65 * 100 */
height: 65vw; /* 100/1.538 = 65 */
background: pink;
max-height: 650px;
max-width: 1000px;
margin: auto;
position: absolute;
top:0;bottom:0; /* vertical center */
left:0;right:0; /* horizontal center */
}
【讨论】：
使用% 表示宽度和高度
DEMO
试试这个，
HTML：
<div><p>content</p></div>
CSS：
div {
border: 1px solid red;
width: 35%;
padding: 40%;
box-sizing: border-box;
position: relative;
}
p {
position: absolute;
top: 0;
left: 0;
}
使用 Jquery，
jQuery 代码：
var width = $('#widthHeight').width();
$('#widthHeight').css('height', width);
【讨论】：
调整高度到宽度非常容易。
由于padding 的百分比是相对于父母的width 的（即使是身高也是如此），您可以这样做：
.smth {
height: 0;
padding: 100% 0 0 0;
}
【讨论】：
当您使用 CSS3 时，您可以使用 the vmin or vmax units。 1 vmin 等于高度或宽度中最小者的 1/100，而 1 vmax 等于较大值的 1/100。如果用户的屏幕分辨率为 1000x800px，100vmin 将等于 800px，100vmax 将等于 1000px，因为这里的高度是较小的单位，宽度是较大的单位。
在您的情况下，您可以像这样使用它：
div {
height: 65vmin;
width: 100vmin;
}
或者：
div {
height: 65vmax;
width: 100vmax;
}
请注意，您必须自己调整这些值。 100vmin 这里会将宽度设置为屏幕高度或宽度的全尺寸（以最小者为准），这可能不是我们想要的效果。
不幸的是，这种方法存在一些浏览器问题。由于它们是新单位，因此支持并不完美。某些浏览器在页面重新加载之前不会调整容器的大小。
【讨论】：