【发布时间】：2012-08-20 16:59:27
【问题描述】：
当我给图像一个百分比宽度或高度时，它只会在保持其纵横比的情况下增长/缩小，但如果我想要与另一个元素相同的效果，是否可以使用百分比将宽度和高度联系在一起?
【问题讨论】：
标签： html css responsive-design
【发布时间】：2012-08-20 16:59:27
【问题描述】：
您可以使用纯 CSS 来做到这一点；不需要 JavaScript。这利用了padding-top percentages are relative to the containing block's width 的（有点违反直觉的）事实。这是一个例子：
.wrapper {
width: 50%;
/* whatever width you want */
display: inline-block;
position: relative;
}
.wrapper:after {
padding-top: 56.25%;
/* 16:9 ratio */
display: block;
content: '';
}
.main {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
/* fill parent */
background-color: deepskyblue;
/* let's see it! */
color: white;
}<div class="wrapper">
<div class="main">
This is your div with the specified aspect ratio.
</div>
</div>【讨论】：
-
我不得不说这太棒了，它甚至可以在 IE 上运行。大+1
-
@IlyaD 从 CSS2 规范中看看这个：little link。
-
您，先生，赢得了互联网。这是巨大的，尤其是对于响应式设计的背景图像。谢谢！
-
对于像我这样有数学障碍的人：要计算 16:9 比率以外的其他东西的上边距百分比，请使用此公式（例如，使用 22:5 比率，其中 22 是 A，5 是B): B / (A / 100) = C%。所以 22:5 是 5 / .22 = 22.72%。
-
如何设置垂直居中
<div class="main">from body ?
不同意 Chris 的想法，另一种选择是使用伪元素，这样您就不需要使用绝对定位的内部元素。
<style>
.square {
/* width within the parent.
can be any percentage. */
width: 100%;
}
.square:before {
content: "";
float: left;
/* essentially the aspect ratio. 100% means the
div will remain 100% as tall as it is wide, or
square in other words. */
padding-bottom: 100%;
}
/* this is a clearfix. you can use whatever
clearfix you usually use, add
overflow:hidden to the parent element,
or simply float the parent container. */
.square:after {
content: "";
display: table;
clear: both;
}
</style>
<div class="square">
<h1>Square</h1>
<p>This div will maintain its aspect ratio.</p>
</div>
我在这里做了一个演示：http://codepen.io/tcmulder/pen/iqnDr
编辑：
现在，对 Isaac 的想法不以为然，在现代浏览器中，简单地使用 vw 单位来强制纵横比会更容易（尽管我不会像他那样使用 vh，否则纵横比会根据窗口高度而变化）。
所以，这简化了事情：
<style>
.square {
/* width within the parent (could use vw instead of course) */
width: 50%;
/* set aspect ratio */
height: 50vw;
}
</style>
<div class="square">
<h1>Square</h1>
<p>This div will maintain its aspect ratio.</p>
</div>
我在这里整理了一个修改后的演示：https://codepen.io/tcmulder/pen/MdojRG?editors=1100
你也可以设置 max-height, max-width, and/or min-height, min-width 如果你不希望它变得可笑地变大或变小，因为它现在基于浏览器的宽度而不是容器并且会无限增长/收缩。
请注意，如果您将字体大小设置为 vw 测量值并将所有内脏设置为 em 测量值，您还可以缩放元素内部的内容，这里有一个演示：https://codepen.io/tcmulder/pen/VBJqLV?editors=1100
【讨论】：
-
这太棒了，因为您不需要包装元素。干得好！
-
如何阻止子内容扩大父内容的高度？
-
我无法在 IE10 中使用这种更短的方法
-
是的，如果孩子可以扩展父母，这不起作用。
-
您可以使用 display: flow-root 或 contains: content on the .square 元素，而不是使用 clearfix hack：codepen.io/fcalderan/pen/xxRPwgL
<style>
#aspectRatio
{
position:fixed;
left:0px;
top:0px;
width:60vw;
height:40vw;
border:1px solid;
font-size:10vw;
}
</style>
<body>
<div id="aspectRatio">Aspect Ratio?</div>
</body>
这里要注意的关键是vw = 视口宽度，vh = 视口高度
【讨论】：
-
请注意，如果屏幕的比例不同，元素的比例也会不同，失去纵横比。
-
@RyanKilleen 除了看起来他在宽度和高度上都使用“vw”。所以百分比仍然具有相同的纵横比。
-
@christophercotton .... 这就是我略读得到的。你是对的。
这就是我的解决方案
<div class="main" style="width: 100%;">
<div class="container">
<div class="sizing"></div>
<div class="content"></div>
</div>
</div>
.main {
width: 100%;
}
.container {
width: 30%;
float: right;
position: relative;
}
.sizing {
width: 100%;
padding-bottom: 50%;
visibility: hidden;
}
.content {
width: 100%;
height: 100%;
background-color: red;
position: absolute;
margin-top: -50%;
}
【讨论】：
(function( $ ) {
$.fn.keepRatio = function(which) {
var $this = $(this);
var w = $this.width();
var h = $this.height();
var ratio = w/h;
$(window).resize(function() {
switch(which) {
case 'width':
var nh = $this.width() / ratio;
$this.css('height', nh + 'px');
break;
case 'height':
var nw = $this.height() * ratio;
$this.css('width', nw + 'px');
break;
}
});
}
})( jQuery );
$(document).ready(function(){
$('#foo').keepRatio('width');
});
【讨论】：
-
这太棒了！我正在使用这个脚本，但是，如果我在多个 DIV 上使用它并且它们每个都有不同的高度......一旦脚本启动，它会将所有高度调整为相同......我不知道为什么！有任何想法吗？我想像这个脚本一样保持纵横比，但保持每个不同的高度。
-
因为函数申请了一组元素。该脚本应分别处理每个元素。这是更新后的代码：jsfiddle.net/QtftX/100
-
如果你刷新页面，宽度和高度会再次重置。你怎么能阻止这个？
-
这在 iOS 上不起作用