维持方面的比例div CSS

Question

我想创建一个 div 这可以改变它的宽度作为窗口的宽度的变化。

是否有任何CSS3规则，允许高度的改变根据宽度， 同时保持它的方面比?

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

Answer 1

只是创建一个包装 <div> 与百分比的价值 padding-bottom, 像这样的：

div {
  width: 100%;
  padding-bottom: 75%;
  background: gold; /** <-- For the demo **/
}

<div></div>

它将导致一个 <div> 与高度等于75％的宽容器(4:3的比率)。

这依赖于这样的事实，用于填充：

该百分比计算相对于 宽 所产生的盒中的含有框[...](资料来源： w3.org, 重点矿山)

垫底值的其他方面的比率和100%的宽度：

aspect ratio  | padding-bottom value
--------------|----------------------
    16:9      |       56.25%
    4:3       |       75%
    3:2       |       66.66%
    8:5       |       62.5%

---

把内容在div:

为了保持方面的比例div和防止其内容从伸它，你需要添加一个绝对的定位儿童并延伸到边缘的包装：

div.stretchy-wrapper {
  position: relative;
}

div.stretchy-wrapper > div {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
}

这里有一个 演示 和另一个更深入的 演示

Answer 2

vw 单位：

您可以使用 vw 两者的单位 宽度和高度 的元素。这允许根据视口宽度保留元素的纵横比。

大众：视口宽度的 1/100。[MDN]

或者，您也可以使用 vh 视口高度，甚至 vmin/vmax 使用较小/较大的视口尺寸（讨论 这里).

例子：1:1 纵横比

div {
  width: 20vw;
  height: 20vw;
  background: gold;
}

<div></div>

对于其他宽高比，您可以使用下表根据元素的宽度计算高度值：

aspect ratio  |  multiply width by
-----------------------------------
     1:1      |         1
     1:3      |         3
     4:3      |        0.75
    16:9      |       0.5625

例子：4x4 方形 div 网格

body {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
div {
  width: 23vw;
  height: 23vw;
  margin: 0.5vw auto;
  background: gold;
}

<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

这里有一个 摆弄这个演示 这是一个解决方案 具有垂直和水平居中内容的响应式正方形网格.

---

浏览器对 vh/vw 单位的支持是 IE9+ 请参阅 我可以使用以获取更多信息

Answer 3

我已经找到一种方法来做到这一点使用CSS，但你必须要小心，因为它可能会根据您自己的网站的流量变化。我已经与我的网站的流体宽度部分内的恒定的纵横比做到了以嵌入视频。

假设有一个嵌入的视频是这样的：

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

您可以然后将所有这一切一个div里面有一个“视频”类。此视频类可能会在你的网站流体元件使得其本身而言，它没有直接的高度限制，但是当你调整浏览器将在宽度根据网站的流量变化。这将是你可能试图让你的嵌入式视频的同时保持视频的某一方面比的元素。

为了做到这一点，我把图像嵌入对象之前“视频”类的div内。

!!!最重要的部分是图像具有要保持正确的纵横比。此外，确保图像的大小至少一样大的最小的你所期望的视频（或任何你正在维护的A.R.），我们将根据您的布局。这将避免在图像的分辨率任何潜在的问题，当它是个调整大小。例如，如果你想保持纵横比为3：2，不只是2px的图像使用的3px。它可能在某些情况下工作，但我没有测试它，它很可能是为了避免一个好主意。

您应该可能已经有一个最小宽度像这样为你的网站的流体元素来定义。如果不是，它是一个好主意，以避免砍元素关闭或有重叠时，浏览器窗口变得太小这样做。最好是有一些点滚动条。在宽度的网页应该得到最小的是周围某处〜600像素（包括任何固定宽度的列），因为屏幕分辨率不来小，除非你是在处理手机友好型网站。 !!!

我用一个完全透明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%; }

请确保您还删除任何显式高度或对象和嵌入标签中的宽度声明，通常附带复制/粘贴嵌入代码。

它的工作方式取决于视频类元件的位置属性和所需的项目有保持一定的高宽比。这需要在一个元件调整大小时的图像将保持其正确的纵横比的方式的优点。它告诉其他任何在视频类元素通过迫使其宽度/高度，以视频类元素的100％，通过图像进行调整采取由动态图像提供了房地产的全面优势。

很酷，是吗？

您可能要玩它有点让它与自己的设计工作，但这个实际工作出奇地好适合我。一般概念是存在的。

Answer 4

要添加到Web_Designer的回答时，将<div>具有高度（完全由底部填充的）的它的宽度的75％的含元素即可。这里有一个很好的总结： http://mattsnider.com/css-using-percent-for-余量 - 和 - 填充/ 。我不知道为什么会这样，但是这是怎么回事。

如果你希望你的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;
}

我使用了类似埃利奥特的形象招一些最近允许我使用CSS媒体查询来服务不同的标志文件取决于设备的分辨率，但仍然按比例增减作为<img>自然会做（我设置的标志作为背景图像具有正确纵横比的透明.PNG）。但Web_Designer的解决方案可以节省我的http请求。

Answer 5

埃利奥特激励我此溶液 - 感谢：

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，功能，可能无法与您的目标浏览器。你可以检查互操作性（F.E.上 caniuse.com ）。

Answer 6

正如在 在这里上w3schools.com 和有些中重申了这个 接受答案, 填充值的百分比(重点煤矿):

指定填补的百分比的宽度 含有元素

因此，一个正确的例的响应DIV，保持一个16:9个方面的比例如下：

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

Answer 7

这是您的解决方案，我已经取得了一些窍门基础：

当你使用它，你的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到高度/宽度，仅此而已。

Answer 8

可以使用SVG。使相对容器/包装位置，将SVG首先作为staticly定位，然后把绝对定位的内容（顶部：0;左：0;右：0;底部：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和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%;" />

Answer 9

正如 @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) 是溢出高度，所以，上拉 overflow height/2 会将其保持在屏幕中央。

为了景观，并保留 16:9, ，你显示使用

.container {
  width: 100vw;
  height: calc(100vw * 9 / 16);
  transform: translateY(calc((100vw * 9 / 16 - 100vh) / -2));
}

比率 9/16 易于更改，无需预先定义 100:56.25 或者 100:75.如果要先保证高度，则应切换宽度和高度，例如 height:100vh;width: calc(100vh * 9 / 16) 9点16分的肖像。

如果您想适应不同的屏幕尺寸，您可能也会感兴趣

• 背景大小 覆盖/包含
  • 上面的样式与contain类似，取决于宽高比。
• 对象匹配
  • 覆盖/包含 img/video 标签
• @media (orientation: portrait)/@media (orientation: landscape)
  • 媒体查询 portrait/landscape 改变比例。

Answer 10

这是对已接受答案的改进：

• 使用伪元素代替包装 div
• 长宽比基于框的宽度而不是其父框的宽度
• 当内容变高时，盒子会垂直拉伸

.box {
  margin-top: 1em;
  margin-bottom: 1em;
  background-color: #CCC;
}

.fixed-ar::before {
  content: "";
  float: left;
  width: 1px;
  margin-left: -1px;
}
.fixed-ar::after {
  content: "";
  display: table;
  clear: both;
}

.fixed-ar-16-9::before {
  padding-top: 56.25%;
}
.fixed-ar-3-2::before {
  padding-top: 66.66%;
}
.fixed-ar-4-3::before {
  padding-top: 75%;
}
.fixed-ar-1-1::before {
  padding-top: 100%;
}

.width-50 {
  display: inline-block;
  width: 50%;
}
.width-20 {
  display: inline-block;
  width: 20%;
}

<div class="box fixed-ar fixed-ar-16-9">16:9 full width</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-3-2 width-20">3:2</div>
<div class="box fixed-ar fixed-ar-4-3 width-20">4:3</div>
<div class="box fixed-ar fixed-ar-1-1 width-20">1:1</div>
<hr>
<div class="box fixed-ar fixed-ar-16-9 width-20">16:9</div>
<div class="box fixed-ar fixed-ar-16-9 width-50">16:9</div>

Answer 11

SCSS是在我的情况下的最佳解决方案;使用数据属性：

[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>

源

Answer 12

只是一个想法或黑客攻击。

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>