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

是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?

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


当前回答

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

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

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

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

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

其他回答

Chrome 88的新特性是CSS的宽宽比属性,其他浏览器也很快会加入。

纵横比CSS属性为盒子设置了一个优先的纵横比,它将用于自动大小的计算和一些其他的布局功能。

CSS技巧文章

更多的信息

div { 背景:rebeccapurple; 身高:100 px; 保证金:1 em汽车; } .square { 纵横比:1 / 1; } < div class = "广场”> < / div >

为了补充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媒体查询来根据设备分辨率提供不同的logo文件,但仍然按照<img>自然会做的比例缩放(我将logo作为背景图像设置为具有正确纵横比的透明。png)。但是Web_Designer的解决方案将为我节省一个http请求。

只是一个想法或黑客。

div { 背景颜色:蓝色; 宽度:10%; 过渡:底色0.5s,宽度0.5s; 字体大小:0; } div:{徘徊 宽度:20%; 背景颜色:红色; } img { 宽度:100%; 高度:汽车; 可见性:隐藏; } < div > <!—使用具有目标纵横比的图像。样本是一个正方形——> <img src="http://i.imgur.com/9OPnZNk.png" /> < / div >

正如w3schools.com网站上所述,并在这个公认的答案中有所重申,填充值为百分比(重点是我的):

以包含元素宽度的百分比指定填充

因此,一个保持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上演示

CSS对此有一个新的属性:aspect-ratio。

https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio

@supports(纵横比:1 / 1){ div { 纵横比:16 / 9; 背景颜色:橙色; } } <div style="width: 200px"></div> . <人力资源/ > <div style="width: 400px"></div> . <人力资源/ > <div style="height: 50px"></div> . <人力资源/ > <div style="height: 10px"></div> .

Chrome和Edge从V88开始完全支持它,Firefox从V81开始支持它(设置layout.css.aspect-ratio。在about:config中启用为true)。

兼容性信息请访问https://caniuse.com/mdn-css_properties_aspect-ratio