我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
我想创建一个div,它可以随着窗口宽度的变化而改变宽度/高度。
是否有任何CSS3规则允许高度根据宽度变化,同时保持其纵横比?
我知道我可以通过JavaScript做到这一点,但我更喜欢只使用CSS。
当前回答
虽然大多数答案都很酷,但大多数都要求已经正确大小的图像……其他解决方案只适用于宽度,而不关心可用的高度,但有时您也希望将内容适应于特定的高度。
我试图将它们组合在一起,以带来一个完全可移植和可调整大小的解决方案……诀窍是使用自动缩放图像,但使用内联svg元素,而不是使用预渲染的图像或任何形式的第二个HTTP请求…
div.holder { 背景颜色:红色; 显示:inline-block; 身高:100 px; 宽度:400 px; } svg img { 背景颜色:蓝色; 显示:块; 高度:汽车; 宽度:汽车; max-width: 100%; max-height: 100%; } .content_sizer { 位置:相对; 显示:inline-block; 高度:100%; } .content { 位置:绝对的; 上图:0; 底部:0; 左:0; 右:0; background - color: rgba(155255年,0,0.5); } < div class = "架" > < div class = " content_sizer”> <svg width=10000 height=5000 /> < div class = "内容" > < / div > < / div > < / div >
请注意,我在SVG的width和height属性中使用了较大的值,因为它需要大于预期的最大大小,因为它只能缩小。这个例子使div的比例为10:5
其他回答
您可以使用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%;" />
在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());
}
}
我是这样做的:
[data-aspect-ratio] {
display: block;
max-width: 100%;
position: relative;
}
[data-aspect-ratio]:before {
content: '';
display: block;
}
[data-aspect-ratio] > * {
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>
源
container {
height: 100vh;
width: 100vw;
}
.container div {
height: 4em;
width: 3em;
}
只是一个想法或黑客。
div { 背景颜色:蓝色; 宽度:10%; 过渡:底色0.5s,宽度0.5s; 字体大小:0; } div:{徘徊 宽度:20%; 背景颜色:红色; } img { 宽度:100%; 高度:汽车; 可见性:隐藏; } < div > <!—使用具有目标纵横比的图像。样本是一个正方形——> <img src="http://i.imgur.com/9OPnZNk.png" /> < / div >