我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
当前回答
如果你想在纵向视图或横向视图的视口中放置一个正方形(尽可能大,但没有任何东西粘在外面),在纵向/横向方向上切换使用vw/vh:
@media (orientation:portrait ) {
.square {
width :100vw;
height:100vw;
}
}
@media (orientation:landscape) {
.square {
width :100vh;
height:100vh;
}
}
其他回答
只需创建一个包装器<div>,并为padding-bottom设置一个百分比值,如下所示:
.demoWrapper { 填充:10 px; 背景:白色; box-sizing: border-box; 调整:水平; 边框:1px虚线; 溢出:汽车; max-width: 100%; 高度:calc(100vh - 16px); } div { 宽度:100%; padding-bottom: 75%; 背景:黄金;/** <——用于演示**/ } < div class = " demoWrapper”> < div > < / 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;
}
这里有一个演示和另一个更深入的演示
我想分享这一点,因为这是一段令人沮丧的几天的旅程,找到了一个适合我的解决方案。我使用这些填充技术(上面提到过使用一些填充和绝对定位的变化)来为网格/flex布局中的按钮类元素实现1:1的纵横比。布局设置为100vh高,以便始终显示为单个非滚动页面。
填充技术确实工作得很好,但它很容易破坏你的网格布局,并导致爆炸性/讨厌的滚动条。在这种情况下,那些说绝对div不会影响布局的人是错误的,因为父元素在高度和宽度上都在增长,即使子元素没有直接影响布局,父元素也会扰乱你的布局。
通常这不是问题,但在使用网格时需要注意。网格是一个2D布局,它可以在两个轴上考虑大小和布局。我仍然试图理解这的确切性质,但到目前为止,似乎至少如果你在一个网格区域内使用这种技术,在两个轴上都受到fr单位的限制,当纵横比项增长或以其他方式改变布局时,你几乎肯定会遇到井喷(显示:无切换和交换网格区域与css也是布局变化问题,导致我的井喷)。
在我的例子中,我限制了一个不需要的列的高度。将其改为“auto”而不是“1fr”,使我所有的其他布局保持不变,防止井喷,同时仍然让我保持我漂亮的方形按钮!
我不知道这是否是这里每个人沮丧的来源,但这是一个很容易犯的错误,即使使用开发工具也不能让你准确地知道井喷来自哪里,因为在许多情况下,它并不是一个单独的元素井喷出来的情况,而是网格布局扩大自己,以保持那些fr单位在垂直和水平上的准确。
这是对公认答案的改进:
使用伪元素而不是包装器div 长宽比基于盒子的宽度,而不是它的父元素 当内容变高时,盒子会垂直拉伸
.box { margin-top: 1 em; margin-bottom: 1 em; background - color: # CCC; } {前.fixed-ar:: 内容:“”; 浮:左; 宽度:1 px; margin-left: 1 px; } {后.fixed-ar:: 内容:“”; 显示:表; 明确:; } {前.fixed-ar-16-9:: padding-top: 56.25%; } {前.fixed-ar-3-2:: padding-top: 66.66%; } {前.fixed-ar-4-3:: padding-top: 75%; } {前.fixed-ar-1-1:: padding-top: 100%; } .width-50 { 显示:inline-block; 宽度:50%; } .width-20 { 显示:inline-block; 宽度:20%; } <div class="box - fixed-ar- ar-16-9">16:9 full width</div> <人力资源> <div class="box - fixed-ar- ar-16-9 width-50">16:9</div> <人力资源> <div class="box - fixed-ar- ar-16-9 width-20">16:9</div> <div class="box - fixed-ar-3-2 width-20">3:2</div> <div class="box - fixed-ar-4-3 width-20">4:3</div> <div class="box - fixed-ar-1-1 width-20">1:1</div> <人力资源> <div class="box - fixed-ar- ar-16-9 width-20">16:9</div> <div class="box - fixed-ar- ar-16-9 width-50">16:9</div>
您可以通过使用SVG来实现这一点。
这要视情况而定,但在某些情况下它真的很有用。举个例子,你可以设置background-image而不设置固定的高度,或者用它来嵌入youtube <iframe>,比例为16:9,位置:绝对等。
对于3:2的比例设置viewBox="0 0 3 2"等等。
例子:
div { 背景颜色:红色 } svg { 宽度:100%; 显示:块; 可见性:隐藏 } .demo-1{宽度:35%} .demo-2{宽度:20%} < div class = " demo-1”> <svg viewBox="0 0 3 2"></svg> . < / div > <人力资源> < div class = " demo-2”> <svg viewBox="0 0 3 2"></svg> . < / div >
在Angular中,我添加了一个处理纵横比的指令。
import { AfterViewInit, Directive, ElementRef, Input, Renderer2 } from
"@angular/core";
import { debounceTime, fromEvent, Subject, takeUntil } from "rxjs";
// Auto sets the height of element based on width. Also supports window resize
@Directive({
selector: '[aspectRatio]'
})
export class AspectRatioDirective implements AfterViewInit {
@Input() aspectRatio?: number; // example 9/16
private readonly onDestroy$ = new Subject<void>();
constructor(private element: ElementRef, private renderer: Renderer2) {}
public ngAfterViewInit(): void {
this.setDimensions();
this.initResizeListeners();
}
public ngOnDestroy(): void {
this.onDestroy$.next();
this.onDestroy$.complete();
}
private setDimensions(): void {
if (!this.aspectRatio) { return; }
const width = this.element.nativeElement.clientWidth;
this.renderer.setStyle(this.element.nativeElement, 'height', `${width * this.aspectRatio}px`);
}
private initResizeListeners(): void {
fromEvent(window, 'resize')
.pipe(debounceTime(100), takeUntil(this.onDestroy$))
.subscribe(() => this.setDimensions());
}
}