保持div与CSS的纵横比
我想创build一个div，可以改变宽度/高度随着窗口宽度的变化。
有没有任何CSS3的规则，可以让高度根据宽度改变， 同时保持其纵横比 ？
我知道我可以通过JavaScript来做到这一点，但我宁愿只使用CSS。
只需用padding-bottom的百分比值创build一个包装器<div> ，如下所示：
div { width: 100%; padding-bottom: 75%; background:gold; /** <-- For the demo **/ }
<div></div>
单位：
您可以使用vw单位来表示元素的宽度和高度 。 这可以根据视口宽度保留元素的高宽比。
vw：视口宽度的1/100。 [ MDN ]
或者，您也可以使用vh作为视口高度，甚至vmin / vmax使用较小/较大的视口尺寸（ 此处讨论）。
例如：1：1宽高比
div { width: 20vw; height: 20vw; background: gold; }
<div></div>
我已经find了一种使用CSS的方法，但是您必须小心，因为它可能会根据您自己的网站stream量而变化。 我已经做了，以便在我的网站的stream体宽度部分内embedded具有恒定高宽比的video。
假设你有这样的embedded式video：
<object> <param ... /><param ... />... <embed src="..." ...</embed> </object>
然后，你可以把这一切都放在一个“video”类的div。 这个video类可能是你网站上的stream动元素，它本身并没有直接的高度限制，但是当你调整浏览器的大小时，它会根据网站的stream量变化。 这将是你可能试图让你的embedded式video，同时保持video的特定长宽比的元素。
为了做到这一点，我把一个图像放在“video”类div内的embedded对象之前。
！ 重要的部分是图像具有你想要保持的正确的宽高比。 此外，请确保图像的大小至less与您期望的video（或任何您要维护的AR）的大小基于您的布局一样大。 这将避免在调整百分比时解决图像的任何潜在问题。 例如，如果要保持3：2的宽高比，请不要只使用3像素的2像素图像。 它可能在某些情况下工作，但我没有testing它，这可能是一个好主意，以避免。
你应该已经有了这样一个最小宽度，就像你的网站stream体元素所定义的那样。 如果不是，那么这样做是一个好主意，以避免在浏览器窗口太小时closures或重叠元素。 在某一点上最好有一个滚动条。 网页的宽度最小应该在〜600px左右（包括任何固定宽度的列），因为屏幕分辨率不会变小，除非您正在处理电话友好的网站。 ！
我使用了一个完全透明的PNG，但我并不认为这是最后的问题，如果你做对了。 喜欢这个：
<div class="video"> <img class="maintainaspectratio" src="maintainaspectratio.png" /> <object> <param ... /><param ... />... <embed src="..." ...</embed> </object> </div>
现在你应该可以添加类似于以下的CSS：
div.video { ...; position: relative; } div.video img.maintainaspectratio { width: 100%; } div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; } div.video embed {width: 100%; height: 100%; }
确保您还删除对象中的任何明确的高度或宽度声明，以及通常带有复制/粘贴embedded代码的embedded标签。
它的工作方式取决于video类元素的位置属性和要保持一定宽高比的项目。 它利用图像在元素中resize时保持适当的高宽比的方式。 它告诉video类元素中的任何其他元素，通过强制其video类元素的宽度/高度被图像调整100％来充分利用dynamic图像提供的房地产。
很酷，呃？
你可能需要花一些时间去适应自己的devise，但实际上这对我来说确实有效。 一般概念就在那里。
要添加到Web_Designer的答案， <div>将具有其包含元素的宽度的75％的高度（完全由底部填充）。 这是一个很好的总结： http : //mattsnider.com/css-using-percent-for-margin-and-padding/ 。 我不知道为什么会这样，但事实就是这样。
如果你想div的宽度不是100％，你需要另外一个div来设置宽度：
div.ar-outer{ width: 60%; /* container; whatever width you want */ margin: 0 auto; /* centered if you like */ } div.ar { width:100%; /* 100% of width of container */ padding-bottom: 75%; /* 75% of width of container */ position:relative; } div.ar-inner { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
我最近使用了类似于Elliot的图像技巧的东西，允许我使用CSS媒体查询来根据设备的分辨率来提供不同的标识文件，但是仍然按照<img>比例自然地进行缩放（我将背景图像设置为透明.png与正确的长宽比）。 但Web_Designer的解决scheme将为我节省一个http请求。
艾略特启发我这个解决scheme – 谢谢：
aspectratio.png是一个完全透明的PNG文件，大小与你喜欢的长宽比一样，在我的例子中是30×10像素。
HTML
<div class="eyecatcher"> <img src="/img/aspectratio.png"/> </div>
CSS3
.eyecatcher img { width: 100%; background-repeat: no-repeat; background-size: 100% 100%; background-image: url(../img/autoresized-picture.jpg); }
请注意： background-size是一个css3特性，可能不适用于您的目标浏览器。 您可以检查互操作性（在caniuse.com上 ）。
基于你的解决scheme，我已经做了一些小技巧：
当你使用它时，你的HTML将是唯一的
<div data-keep-ratio="75%"> <div>Main content</div> </div>
以这种方式使用它：CSS：
*[data-keep-ratio] { display: block; width: 100%; position: relative; } *[data-keep-ratio] > * { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
和js（jQuery）
$('*[data-keep-ratio]').each(function(){ var ratio = $(this).data('keep-ratio'); $(this).css('padding-bottom', ratio); });
有了这个，你只需将attr data-keep-ratio为高度/宽度即可。
正如在w3schools.com这里所述，并在这个接受的答案有所重申，填充值的百分比（重点是我的）：
指定包含元素的宽度的百分比的填充
Ergo是保持16：9宽高比的响应DIV的正确示例，如下所示：
CSS
.parent { position: relative; width: 100%; } .child { position: relative; padding-bottom: calc(100% * 9 / 16); } .child > div { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }
HTML
<div class="parent"> <div class="child"> <div>Aspect is kept when resizing</div> </div> </div>
在JSFiddle上演示
你可以使用svg。 使容器/包装位置相对，首先静态放置svg，然后放置绝对定位的内容（top：0; left：0; right：0; bottom：0;）
比例为16：9的示例：
image.svg :(可以在src中内联）
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 9" width="16" height="9"/>
CSS：
.container { position: relative; } .content { position: absolute; top:0; left:0; right:0; bottom:0; }
HTML：
<div class="container"> <img style="width: 100%" src="image.svg" /> <div class="content"></div> </div>
请注意内联svg似乎不工作，但您可以urlencode svg并embedded到img src属性中，如下所示：
<img src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%209%22%20width%3D%2216%22%20height%3D%229%22%2F%3E" style="width: 100%;" />
SCSS是我的最佳解决scheme; 使用数据属性：
[data-aspect-ratio] { display: block; max-width: 100%; position: relative; &:before { content: ''; display: block; } > * { display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; } } [data-aspect-ratio="3:1"]:before { padding-top: 33.33%; } [data-aspect-ratio="2:1"]:before { padding-top: 50%; } [data-aspect-ratio="16:9"]:before { padding-top: 56.25%; } [data-aspect-ratio="3:2"]:before { padding-top: 66.66%; } [data-aspect-ratio="4:3"]:before { padding-top: 75%; } [data-aspect-ratio="1:1"]:before { padding-top: 100%; } [data-aspect-ratio="3:4"]:before { padding-top: 133.33%; } [data-aspect-ratio="2:3"]:before { padding-top: 150%; } [data-aspect-ratio="9:16"]:before { padding-top: 177.77%; } [data-aspect-ratio="1:2"]:before { padding-top: 200%; } [data-aspect-ratio="1:3"]:before { padding-top: 300%; }
例如 ：
<div data-aspect-ratio="16:9"><iframe ...></iframe></div>
资源
可以说你有2个div，outher div是一个容器，inner可以是任何你需要保持它的比例的元素（img或者youtube iframe或者其他）
HTML看起来像这样：
<div class='container'> <div class='element'> </div><!-- end of element -->
可以说你需要保持“元素”的比例，
比例=> 4比1或2比1 …
CSS看起来像这样
.container{ position: relative; height: 0 padding-bottom : 75% /* for 4 to 3 ratio */ 25% /* for 4 to 1 ratio ..*/ } .element{ width : 100%; height: 100%; position: absolute; top : 0 ; bottom : 0 ; background : red; /* just for illustration */ }
在％中指定填充时，根据宽度而不是高度进行计算。 所以基本上你没有关系，你的宽度，它的高度总是会根据这个来计算。 这将保持比例。
虽然大多数答案都非常酷，但大多数答案都需要有一个正确的大小的图像…其他解决scheme只适用于宽度，不关心可用的高度，但有时你也想要在一定的高度内容。
我试图将它们结合在一起，以提供一个完全可移植和重新大小的解决scheme…诀窍是使用自动缩放图像，但使用内联svg元素，而不是使用预渲染的图像或任何forms的第二个HTTP请求…
div.holder{ background-color:red; display:inline-block; height:100px; width:400px; } svg, img{ background-color:blue; display:block; height:auto; width:auto; max-width:100%; max-height:100%; } .content_sizer{ position:relative; display:inline-block; height:100%; } .content{ position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(155,255,0,0.5); }
<div class="holder"> <div class="content_sizer"> <svg width=10000 height=5000 /> <div class="content"> </div> </div> </div>
我遇到过这个问题很多次了，所以我为它做了一个JS解决scheme。 这基本上是根据元素的宽度按照你指定的比例来调整元素的高度。 你可以使用它如下：
<div ratio="4x3"></div>
请注意，由于它是设置元素的高度，因此元素应该是display:block或display:inline-block 。
如果要在纵向或横向视图（尽可能大，但没有任何粘在外面）的情况下在视口中放置方形，请在方向portrait / landscape上使用vw / vh进行切换：
@media (orientation:portrait ) { .square { width :100vw; height:100vw; } } @media (orientation:landscape) { .square { width :100vh; height:100vh; } }
只是一个想法或黑客。
div { background-color: blue; width: 10%; transition: background-color 0.5s, width 0.5s; font-size: 0; } div:hover { width: 20%; background-color: red; } img { width: 100%; height: auto; visibility: hidden; }
<div> <!-- use an image with target aspect ratio. sample is a square --> <img src="http://i.imgur.com/9OPnZNk.png" /> </div>
由于@ web-tiki已经显示出使用vh / vw ，我还需要一种方法来在屏幕中心，这里是一个用于9:16肖像的代码片段。
.container { width: 100vw; height: calc(100vw * 16 / 9); transform: translateY(calc((100vw * 16 / 9 - 100vh) / -2)); }
translateY将保持这个中心在屏幕上。 calc(100vw * 16 / 9)预计9/16的高度。 (100vw * 16 / 9 - 100vh)是溢stream高度，所以上拉overflow height/2会保持在屏幕上。
为了风景，并保持16：9 ，你显示使用
.container { width: 100vw; height: calc(100vw * 9 / 16); transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2)); }
如果要先确定高度，则应该切换宽度和高度，例如height:100vh;width: calc(100vh * 9 / 16)为9:16肖像。
如果你想适应不同的屏幕尺寸，你也可能会感兴趣
- 背景大小的封面/包含
- 以上风格类似于包含，取决于宽高比。
- 对象的合
- 封面/包含img /video标签
-
@media (orientation: portrait)/@media (orientation: landscape)- 用于
portrait/landscape媒体查询来改变比率。
- 用于
如果整个容器结构是基于百分比的，这将是默认的行为，你能提供一个更具体的例子吗？
下面是我的意思，如果你的整个父级层次是基于％的例子，任何浏览器窗口调整将工作，没有任何额外的js / css，这是不是可能与您的布局？
<div style="width: 100%;"> <div style="width: 50%; margin: 0 auto;">Content</div> </div>
我用了一个新的解决scheme。
.squares{ width: 30vw height: 30vw
以主要宽高比
.aspect-ratio width: 10vw height: 10vh
但是，这是相对于整个视口。 所以，如果你需要一个div，它是视口宽度的30％，你可以用30vw来代替，因为你知道这个宽度，所以你可以用calc和vw单位来重新使用它们。
