2020解决方案-使用网格和填充伪元素

我找到了一些更新颖的方法来破案。该解决方案是any填充底部方法的后代，但没有任何位置:绝对子方法，只使用display: grid;和伪元素。

这里我们有。ratio::before，填充底部:XX%，网格区域:1 / 1 / 1 / 1;，这迫使伪元素保持在网格中的位置。虽然这里我们有width: 0;为了防止主元素被这个索引溢出(我们在这里冷地使用z-index，但是这个索引更短)。

我们的主元素。ratio > *:first-child与。ratio::之前的位置相同，即grid-area: 1 / 1 / 1 / 1;，因此它们共享相同的网格单元格位置。现在我们可以在div中放入任何内容，而pseudo元素是决定宽高比的元素。更多关于网格区域。

.ratio { 显示:网格; grid-template-columns: 1 fr; max-width: 200 px;例如，/*可以是100%，取决于父*/ ｝ {前.ratio:: 内容:”; 宽度:0; 填充底:calc(100% / (16/9));/*在这里你可以放置任何比例*/ 网格面积:1 / 1 / 1 / 1; ｝ .ratio > *:第一个孩子{ 网格面积:1 / 1 / 1 / 1;/*与*/前的::相同 背景:rgba(0,0,0,0.1);例如*/ ｝ < div class = "比" > 16/9 < div > < / div > < / div >

虽然你可以使用cssval并使用样式属性将比值放在HTML中。工作与显示:内联网格以及。

.ratio { 显示:inline-grid; grid-template-columns: 1 fr; 宽度:200 px;例如，/*可以是100%，取决于父*/ margin-right: 10 px;例如*/ ｝ {前.ratio:: 内容:”; 宽度:0; 填充底部:calc(100% / (var(—r)));/*在这里你可以放置任何比例*/ 网格面积:1 / 1 / 1 / 1; ｝ .ratio > *:第一个孩子{ 网格面积:1 / 1 / 1 / 1;/*与*/前的::相同 背景:rgba(0,0,0,0.1);例如*/ ｝ <div class="ratio" style="——r: 4/3;"> < div > 4/3 < / div > < / div > <div class="ratio" style="——r: 16/9;"> 16/9 < div > < / div > < / div >

我想分享这一点，因为这是一段令人沮丧的几天的旅程，找到了一个适合我的解决方案。我使用这些填充技术(上面提到过使用一些填充和绝对定位的变化)来为网格/flex布局中的按钮类元素实现1:1的纵横比。布局设置为100vh高，以便始终显示为单个非滚动页面。

填充技术确实工作得很好，但它很容易破坏你的网格布局，并导致爆炸性/讨厌的滚动条。在这种情况下，那些说绝对div不会影响布局的人是错误的，因为父元素在高度和宽度上都在增长，即使子元素没有直接影响布局，父元素也会扰乱你的布局。

通常这不是问题，但在使用网格时需要注意。网格是一个2D布局，它可以在两个轴上考虑大小和布局。我仍然试图理解这的确切性质，但到目前为止，似乎至少如果你在一个网格区域内使用这种技术，在两个轴上都受到fr单位的限制，当纵横比项增长或以其他方式改变布局时，你几乎肯定会遇到井喷(显示:无切换和交换网格区域与css也是布局变化问题，导致我的井喷)。

在我的例子中，我限制了一个不需要的列的高度。将其改为“auto”而不是“1fr”，使我所有的其他布局保持不变，防止井喷，同时仍然让我保持我漂亮的方形按钮!

我不知道这是否是这里每个人沮丧的来源，但这是一个很容易犯的错误，即使使用开发工具也不能让你准确地知道井喷来自哪里，因为在许多情况下，它并不是一个单独的元素井喷出来的情况，而是网格布局扩大自己，以保持那些fr单位在垂直和水平上的准确。

有几种方法可以在元素(如div)上指定固定的纵横比，下面是其中的两种:

1. 纵横比CSS属性

div { 纵横比:1 / 1; 宽度:50%; 背景:蓝绿色; ｝ <div>纵横比:1 / 1

这是最简单灵活的解决方案。它直接为元素指定固定的宽高比(或高宽比)。这意味着您还可以根据元素的高度指定纵横比。 它不依赖于父宽度(像填充技术)或视口大小(像下面的vw单元技术)，它依赖于元素自身的宽度或高度。这就是为什么与其他变通方法相比，它是如此强大。

这是一个现代化的房产(2021年)。所有现代浏览器都支持它，请参阅caniuse以获得精确的浏览器支持。

下面是一些不同纵横比的例子:

.ar-1-1{纵横比:1 / 1;} .ar-3-2{纵横比:3 / 2;} .ar-4-3{纵横比:4 / 3;} .ar-16-9{纵横比:16 / 9;} .ar-2-3{纵横比:2 / 3;} .ar-3-4{纵横比:3 / 4;} .ar-9-16{纵横比:9 / 16;} /**对于演示:**/ 身体{ 显示:flex; flex-wrap:包装; 对齐项目:flex-start; ｝ div { 背景:蓝绿色; 宽度:23%; 利润率:1%; 填充:20 px 0; box-sizing: border-box; 颜色:# fff; text-align:中心; ｝ <div class="ar-1-1">纵横比:1 / 1 <div class="ar-3-2">纵横比:3 / 2 <div class="ar-4-3">纵横比:4 / 3 <div class="ar-16-9">纵横比:16 / 9 <div class="ar-2-3">纵横比:2 / 3 <div class="ar-3-4">纵横比:3 / 4 <div class="ar-9-16">纵横比:9 / 16

2. 使用大众单位:

你可以用vw单位来表示元素的宽度和高度。这允许根据视口宽度保留元素的纵横比。

Vw:视口宽度的百分之一。(MDN)

或者，你也可以使用vh作为视口高度，或者甚至使用vmin/vmax来使用视口尺寸中的较大/较小(此处讨论)。

例如:1:1的纵横比 div { 宽度:20大众; 高度:20大众; 背景:黄金; ｝ < div > < / div >

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

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

示例:正方形div的4x4网格

身体{ 显示:flex; flex-wrap:包装; justify-content:之间的空间; ｝ div { 宽度:23大众; 高度:23大众; 利润率:0.5大众汽车; 背景:黄金; ｝ < 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+，参见canIuse了解更多信息

您可以使用svg。使容器/包装器的位置相对，首先将svg放置为静态定位，然后放置绝对定位的内容(顶部: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%;" />

我使用了一个新的解决方案。

.squares{
  width: 30vw
  height: 30vw

与主纵横比

.aspect-ratio
  width: 10vw
  height: 10vh

然而，这是相对于整个视口而言的。所以，如果你需要一个div是视口宽度的30%，你可以使用30vw代替，因为你知道宽度，你可以使用calc和vw单位在高度上重用它们。

我偶然发现了这个问题的聪明解决方案，使用<svg>和display:grid。

一个display:grid元素允许您使用相同的网格区域，与它的两个(或更多)子元素占据相同的空间。 这意味着它们都是流内容，重叠在一起，并且高的那个设定了比例。

其中之一是负责设置比率的<svg>。另一个是实际内容。如果实际内容很短，并且永远不会占满整个比例(并且您只想让它以这个比例居中)，只需将其居中(请参阅下面的第一个可运行代码片段)。

<div class="ratio">
  <svg viewBox="0 0 1 1"></svg>
  <div>
    I'm square
  </div>
</div>

.ratio {
  display: grid;
}
.ratio > * {
  grid-area: 1/1;
}

将<svg>的比率设置为您想要的任何值:

<svg viewBox="0 0 4 3"></svg> . <svg viewBox="0 0 16 9"></svg> .

.ratio { 显示:网格; ｝ .ratio > * { 网格:1/1; ｝ /*下面的代码不需要设置比例 我只是想在视觉上做个标记 *和中心内容 * / .ratio div { 边框:1px纯红色; 显示:flex; 对齐项目:中心; justify-content:中心; ｝ < div class = "比" > <svg viewBox="0 0 7 1"></svg> . < div > 固定比例7:1 < / div > < / div >

如果你需要一个解决方案，其中内容元素有更多的内容，你想要限制在一个滚动区域与期望的比例，设置位置:相对的父位置:绝对;高度:100%;overflow-y:汽车;在内容上，允许流内容元素(<svg>)设置大小，因此设置比率。

.ratio { 显示:网格; 位置:相对; ｝ .ratio > * { 网格:1/1; ｝ .ratio > div { 高度:100%; overflow-y:汽车; 位置:绝对的; /*其余部分不需要*/ 边框:1px纯红色; 填充物:0 1rem; ｝ < div class = "比" > <svg viewBox="0 0 7 2"></svg> . < div > <h1>固定比例7:2</h1> <p>痛苦的痛苦，神圣的解脱，痛苦的痛苦和巨大的痛苦。一个永恒的灵魂。扫描光晕直径，坐与nisl，疑，adipiscisbendum。一个永远的主人，一个生命的时刻，一个心灵的灵魂。Morbi enim nunc faucibus一个漂亮的坐遇见porttitor。Arcu odio ut sem nulla。在分娩的过程中。克拉巧合的叶状裂片，在augue eget。老爷子和老爷子坐着。我不知道你在说什么。狮子座，在生命的turpis massa, tempus element, estestas。est整数eget aliquet nibh。多洛尔与神圣的精英们会面。 <p>但aliquam purus sit meet。Eget magna fermentum iaculis eu non diam phasellus vestibulum。这是我的命运，我的命运。剥夺权利，剥夺权利，剥夺生命。移动门，非枕边边，老窝悬挂。在tellus在urna condimentum mattis pellentesque。圣歌，圣歌，圣歌。这是一种很好的方法。皮朗式的夹缝。Velit euismod in pellentesque massa placerat duis。这是我的生命。 <p>Mauris a diam maecenas sed enim ut sem。在怀孕的过程中。我的格言是我的，我的灵魂是我的。Urna porttitor rhoncus dolus purus non enim present。下丘脑大炎，下丘脑大炎。生命之箭，狮子座之箭。对车辆的不作为权，对生命的不作为权。Volutpat odio facilisis mauris sit amet massa vitae tortorcondimentum。Aliquam purus sit at the luctus venenatis lectus magna。坐下来，感受孕妇的痛苦。Enim eu turpis eggestas pretium aenean。不可预知的后果。在怀孕初期，永远没有生气。言归正传。Blandit massa enim nec dui nunc mattis enim ut。 < / div > < / div >

正如@emjay在下面的评论中指出的那样，ratio svg可以放在父元素的一个伪元素中，只要它被正确编码:

.three-squares { 显示:网格; 边框:1px纯红色; ｝ .three-squares > *， .three-squares:before { 网格:1/1; ｝ .three-squares:{之前 content: url("data:image/svg+xml，%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 1'%3E%3C/svg%3E"); 行高:0; ｝ < div class = "抢走”> < div >我3:1 < / div > < / div >

当在伪元素中使用时，<svg>成为一个替换的元素，默认情况下，它位于可变高度的基线上(Chrome中为4px, Firefox中为3.5px)。基线的高度根据行高而变化，这就是为什么我们需要在pseudo上设置line-height: 0以获得准确的比率。详情请点击这里。

我个人更喜欢将<svg>放在标记中的版本，因为我可以用一个类(.ratio)处理各种比率的容器(而不是为我可能需要的每个比率使用一个类)。