我想创建一个div，它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化，同时保持其纵横比?
我知道我可以通过JavaScript做到这一点，但我更喜欢只使用CSS。
当前回答
有几种方法可以在元素(如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了解更多信息
其他回答
Chrome 88的新特性是CSS的宽宽比属性，其他浏览器也很快会加入。
纵横比CSS属性为盒子设置了一个优先的纵横比，它将用于自动大小的计算和一些其他的布局功能。
CSS技巧文章
更多的信息
div { 背景:rebeccapurple; 身高:100 px; 保证金:1 em汽车; ｝ .square { 纵横比:1 / 1; ｝ < div class = "广场”> < / div >
艾略特启发我想出了这个解决方案——谢谢:
png是一个完全透明的png文件，大小和你喜欢的纵横比一样，在我的例子中是30x10像素。
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)。
我已经找到了一种使用CSS来做到这一点的方法，但你必须小心，因为它可能会根据你自己网站的流程而变化。我这样做是为了在我的网站的流体宽度部分中嵌入具有恒定长宽比的视频。
假设你有一个这样的嵌入视频:
<object>
<param ... /><param ... />...
<embed src="..." ...</embed>
</object>
然后你可以把这些都放在一个带有“video”类的div中。这个视频类可能是你网站中的流动元素，它本身没有直接的高度限制，但当你调整浏览器的大小时，它会根据网站的流量改变宽度。这可能是你想要嵌入视频的元素，同时保持一定的视频宽高比。
为了做到这一点，我在“video”类div中的嵌入对象之前放了一张图像。
! !重要的部分是图像具有您希望保持的正确长宽比。此外，确保图像的大小至少与你期望的视频(或你正在维护的A.R.)根据你的布局得到的最小尺寸一样大。这将避免在调整百分比大小时图像分辨率中的任何潜在问题。例如，如果你想保持3:2的纵横比，不要只使用3px * 2px的图像。它在某些情况下可能会工作，但我还没有测试过，避免使用它可能是个好主意。
您可能已经为网站的流体元素定义了这样的最小宽度。如果没有，那么这样做是一个好主意，以避免在浏览器窗口变得太小时删除元素或出现重叠。在某些地方最好有一个滚动条。一个网页的最小宽度应该在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%; }
确保您还删除了对象和嵌入标记中任何显式的高度或宽度声明，这些标记通常带有复制/粘贴嵌入代码。
它的工作方式取决于视频类元素的位置属性和你想要的项目保持一定的纵横比。它利用了图像在元素中调整大小时保持适当长宽比的方法。它告诉视频类元素中的任何其他元素，通过强制其宽度/高度为图像所调整的视频类元素的100%来充分利用动态图像提供的空间。
很酷，是吧?
您可能需要稍微摆弄一下才能让它与您自己的设计一起工作，但这实际上对我来说工作得非常好。大概的概念是这样的。
根据你的解决方案，我做了一些技巧:
当您使用它时，您的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;
}
jQuery和jQuery
$('*[data-keep-ratio]').each(function(){
var ratio = $(this).data('keep-ratio');
$(this).css('padding-bottom', ratio);
});
有了这个，你只需要设置attr data-keep-ratio到高/宽，就这样。
感谢大家的贡献，我将在这里添加我的解决方案，这主要是通过重复已接受的答案来实现的。我喜欢这种方法的主要原因是没有不必要的DOM，因为我在填充之前使用:。
@card-standard-line-height: 21px;
@card-standard-title-line-height: 22.5px;
@16to9percentage: 56.25%;
.overflow {
background-color: inherit;
/* stylelint-disable property-no-unknown */
box-orient: vertical;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
/* stylelint-enable */
color: inherit;
display: box;
display: -webkit-box;
display: -moz-box;
max-width: 100%;
overflow: hidden;
position: relative;
text-overflow: -o-ellipsis-lastline;
text-overflow: ellipsis;
}
* {
box-sizing: border-box;
}
body {
padding: 2rem;
}
.card {
color: #fff;
height: auto;
max-width: 100%;
min-width: unset;
position: relative;
h2 {
font: 18px / 22.5px bold;
}
p {
font: 14px / 21px normal;
}
&-16to9 {
.badge {
color: white;
display:flex;
background-color: red;
justify-content: baseline;
padding: 16px 32px 12px 16px;
position: absolute;
right: 0;
top: 16px;
z-index: 2;
span {
font: 14px / 14px bold;
}
}
// look at this https://css-tricks.com/aspect-ratio-boxes/
.card {
&_description {
max-height: @card-standard-line-height * 1;
// Number of allowable lines in layout
-webkit-line-clamp: 1;
}
&_image,
&_info {
bottom: 0;
height: 100%;
max-height: 100%;
min-height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 0;
}
&_info {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 24px;
z-index: 2;
}
&_title {
max-height: @card-standard-title-line-height * 2;
// Number of allowable lines in layout
-webkit-line-clamp: 2;
}
}
&:after,
&:before {
content: "";
display: block;
}
&:after {
background: rgba(0, 0, 0, 0);
background: linear-gradient(0deg, rgba(0, 0, 0, 1) 16%, rgba(0, 0, 0, 0) 100%);
bottom: 0;
height: 100%;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
&:before {
padding-bottom: @16to9percentage;
}
}
}
https://codepen.io/augur/pen/GRNGLZv?editors=0100
