Html 响应式更改 div 大小保持纵横比
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12121090/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Responsively change div size keeping aspect ratio
提问by ilyo
When I give an image a percent width or height only it will grow/shrink keeping its aspect ratio, but if I want the same effect with another element, is it possible at all to tie the width and the height together using percentage?
当我给图像一个百分比宽度或高度时，它只会增长/缩小保持其纵横比，但如果我想要与另一个元素相同的效果，是否有可能使用百分比将宽度和高度联系在一起？
回答by Chris
You can do this using pure CSS; no JavaScript needed. This utilizes the (somewhat counterintuitive) fact that padding-toppercentages are relative to the containing block's width. Here's an example:
你可以使用纯 CSS 来做到这一点；不需要 JavaScript。这利用了padding-top百分比与包含块的宽度相关的（有点违反直觉的）事实。下面是一个例子：
.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>回答by Tomas Mulder
Bumming off Chris's idea, another option is to use pseudo elements so you don't need to use an absolutely positioned internal element.
反对克里斯的想法，另一种选择是使用伪元素，这样您就不需要使用绝对定位的内部元素。
<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>
I've put together a demo here: http://codepen.io/tcmulder/pen/iqnDr
我在这里整理了一个演示：http: //codepen.io/tcmulder/pen/iqnDr
EDIT:
编辑：
Now, bumming off of Isaac's idea, it's easier in modern browsers to simply use vw units to force aspect ratio (although I wouldn't also use vh as he does or the aspect ratio will change based on window height).
现在，讨厌 Isaac 的想法，在现代浏览器中更容易简单地使用 vw 单位来强制纵横比（尽管我不会像他那样也使用 vh 否则纵横比会根据窗口高度而变化）。
So, this simplifies things:
所以，这简化了事情：
<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>
I've put together a modified demo here: https://codepen.io/tcmulder/pen/MdojRG?editors=1100
我在这里整理了一个修改后的演示：https: //codepen.io/tcmulder/pen/MdojRG?editors=1100
You could also set max-height, max-width, and/or min-height, min-width if you don't want it to grow ridiculously big or small, since it's based on the browser's width now and not the container and will grow/shrink indefinitely.
如果您不希望它变得可笑地大或小，您还可以设置 max-height、max-width 和/或 min-height、min-width，因为它现在基于浏览器的宽度而不是容器并且将无限增长/缩小。
Note you can also scale the content inside the element if you set the font size to a vw measurement and all the innards to em measurements, and here's a demo for that: https://codepen.io/tcmulder/pen/VBJqLV?editors=1100
请注意，如果将字体大小设置为 vw 测量值并将所有内脏设置为 em 测量值，则还可以缩放元素内的内容，这是一个演示：https: //codepen.io/tcmulder/pen/VBJqLV?editors =1100
回答by Isaac
<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>
The key thing to note here is vw= viewport width, and vh= viewport height
这里要注意的关键是vw= 视口宽度和vh= 视口高度
回答by Mykyta Shyrin
That's my solution
这就是我的解决方案
<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%;
}
回答by Peter
(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');
});
Working example: http://jsfiddle.net/QtftX/1/
工作示例：http: //jsfiddle.net/QtftX/1/
