我有一个尺寸和宽度可变的外部容器.假设在这个容器里面,我有一个画布,我想要尽可能地增长,同时保持比例而不是裁剪.为此,我通常会使用object-fit:contains.
HTML:
<div class="outerContainer"> <canvas width="640" height="360"></canvas> <div class="beside"> </div> </div>
CSS:
.outerContainer { display: flex; border: 0.5em solid #444; margin-bottom: 2em; object-fit: contain; } .outerContainer canvas { flex-grow: 1; background: #77a; } /* This element has a fixed width,and should be whatever height the <canvas> is */ .outerContainer .beside { flex-basis: 3em; flex-grow: 0; flex-shrink: 0; background: #7a7; }
在这种情况下,我想缩放整个outerContainer的大小,就像我用canvas一样.问题是对象拟合并不会实际缩放元素…它缩放其内容.这似乎不适用于正常的块元素,导致如果有足够的宽度,画布内部可能会发生倾斜.
如果我添加object-fit:contains到canvas元素,它保持比例,但仍然使用全宽,意味着.beside元素一直到右边.这是可视化与画布上的紫色背景.
我想要的是外部容器被缩放的画布内容,所以.beside总是具有画布内容的高度. .outerContainer应该在父元素中居中,占用尽可能多的空间,而不会使画布失真.像这样,按比例的比例:
这是否适合现代CSS?还是必须使用脚本解决方案?
解决方法
我不知道这是否适合你,但是我认为如果你允许多一点HTML,它可以大部分在css中完成.
考虑下面的html
<div class="outerContainer"> <div class="canvasContainer"> <canvas width="640" height="360"></canvas> </div> <div class="beside"> </div> </div>
我刚刚在画布上添加了一些div.这样我们让画布处理它的东西,我们使用div来做flex事情.
使用以下css:
* { Box-sizing: border-Box; } .outerContainer { display: flex; border: 0.5em solid #444; margin-bottom: 2em; } .canvasContainer canvas { width: 100%; background: #777; margin-bottom: -4px } .canvasContainer { flex-grow: 1; background: #77a; } /* This element has a fixed width,and should be whatever height the <canvas> is */ .outerContainer .beside { flex-basis: 3em; flex-grow: 0; flex-shrink: 0; background: #7a7; }
我们拥有所有可用空间的帆布容器.然后画布适应其中的图像缩放.
然而,我不知道为什么,画布底部有一点边缘,所以它的负面利润.
小提琴:https://jsfiddle.net/L8p6xghb/3/
作为附注,如果您想要使用它来代替字幕,则会有html5元素,如<figure>
和<figcaption>
!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。