保持div与CSS的纵横比

我想创build一个div,可以改变宽度/高度随着窗口宽度的变化。

有没有任何CSS3的规则,可以让高度根据宽度改变, 同时保持其纵横比

我知道我可以通过JavaScript来做到这一点,但我宁愿只使用CSS。

div根据窗口的宽度保持长宽比

只需用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:blockdisplay:inline-block

https://github.com/JeffreyArts/html-ratio-component

如果要在纵向或横向视图(尽可能大,但没有任何粘在外面)的情况下在视口中放置方形,请在方向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单位来重新使用它们。