aspect-ratio 相关问题

元素的纵横比描述了其宽度与高度之间的比例关系。

如何让我的网格始终保持与 1:1 相同的正方形尺寸?

我只是 HTML 和 javascript 的初学者,所以我还没有完全掌握这门语言。我碰壁了,正在寻求帮助。 点击查看情况 问题是我...

回答 1 投票 0

如何在 Vidstack 中包含垂直 YouTube 视频(没有“更多视频”UI)

默认情况下,Vidstack 会将垂直的 YouTube 视频缩放/裁剪为 16/9 的宽高比: 如果禁用 height: 1000% 样式,则会根据需要包含垂直视频。然而,不需要的元素...

回答 1 投票 0

保持内部SVG的纵横比

我有一个根 SVG 元素,定义如下(插入到 的顶部): 我有一个根 SVG 元素,定义如下(插入到 <body> 的顶部): <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg-library"> <defs> <symbol id="image1" viewBox="-10 0 828 1000"> <path fill="currentColor" d="…" /> </symbol> </defs> </svg> 现在,我“实例化”库中的图像: <svg class="inline"> <!-- .inline { fill: currentColor; display: inline-block; } --> <use href="#image1"></use> </svg> 我希望它的高度为 1em 并保持纵横比(828 ÷ 1000,请参阅 viewBox)。我使用哪些 CSS 或属性? 设置 height: 1em; width: auto; 使其高度为 1em,但宽度似乎是容器的 100%。 设置aspect-ratio: auto;也没有帮助,我猜,viewBox定义的比率不是内在。 您可以使用CSS属性aspect-ratio。 p { color: navy; } .inline { fill: currentColor; display: inline-block; height: 1em; aspect-ratio: 828/1000; } <svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" style="position: absolute;"> <defs> <symbol id="image1" viewBox="-10 0 828 1000"> <path fill="currentColor" d="M -10 50 L 818 0 L 690 1000 L 40 700 Z" /> </symbol> </defs> </svg> <p>Here is your inline <svg class="inline"><use href="#image1" /></svg> SVG.</p>

回答 1 投票 0

当父容器的高度超过限制时,CSS 纵横比不会保持

我正在开发一种布局,其中父容器内的子元素必须始终保持 16:9 的宽高比。父容器的大小可以通过JavaScript动态调整,并且...

回答 1 投票 0

当最大宽度小于真实宽度时保持图像长宽比

我有一个大图像,其CSS中的宽度由width: 1024px设置,并且还由max-width: 100%控制。高度也以px为单位指定,以便浏览器正确渲染页面...

回答 1 投票 0

FFMPEG 比率和 SAR 为 1

我有一个 1280x720px 的视频,SAR = 540:401。 我的目的是,使用FFMPEG,将SAR设置为1,并获得最终分辨率1280*534。

回答 1 投票 0

如何在其显示区域内将 MAUI 图像与宽高比填充对齐?

有没有办法在 .NET MAUI 8 中使用 Aspect="AspectFill" 在其显示区域内对齐/定位 ,或者是否有一种解决方法可以产生相同的视觉结果? 我正在尝试...

回答 1 投票 0

保持 div 宽高比并居中,无论父级的宽高比如何

我发现这个CSS代码可以让我保持div的长宽比。 。容器 { 宽度:100%; 高度:100%; 背景颜色:红色; 位置:绝对; } .包装器{ 宽度:100%; /*

回答 2 投票 0

使用CSS保持div的纵横比,并设置最大高度[重复]

是否有机会通过最大高度选项保持 DIV 的纵横比? 有一个保持纵横比的解决方案: div.stretchy-wrapper { 位置:相对; 宽度:100%; 底部填充:7...

回答 1 投票 0

尽管玩家渲染正确,FFprobe 仍读取不正确的分辨率值

我正在 FFMPEG 的帮助下从流创建视频,我还使用 FFPROBE 收集信息以在状态页面上使用,例如分辨率、编解码器等。 当 FFProbe 解析我的视频时

回答 1 投票 0

将表格单元格设为正方形

如何在不使用固定大小的情况下保证表格的每个单元格都变成正方形?当宽度改变时要做出响应。 桌子 { 宽度:90%; } TD { 宽度:30%; } tr { /** w...

回答 4 投票 0

如何在Qt中保持小部件的长宽比?

如何在 Qt 中保持小部件的纵横比以及使小部件居中?

回答 6 投票 0

为什么修饰符顺序会影响 Jetpack Compose 中宽高比的定位和大小?

实际上我正在阅读这个答案,但没有足够的有关宽高比的信息。 矩形屏幕: @可组合 有趣的矩形屏幕(修饰符:修饰符){ 画布(修饰符.边框(7.dp,

回答 1 投票 0

如何在使用宽高比时使内容适合可见页面?

我的页面上有一个组件(在示例中名为网格)。 我希望这个组件能够实现以下限制: -1- 保持 1:1 纵横比 -2- 尽可能大 -3- 留在...

回答 1 投票 0

HTML/CSS - 如何在使用宽高比时使内容适合可见页面?

我的页面上有一个组件(在示例中名为网格)。 我希望这个组件能够实现以下限制: -1- 保持 1:1 纵横比 -2- 尽可能大 -3- 留在...

回答 1 投票 0

使用 CSS 调整 html 元素大小并裁剪 html 元素

我正在寻找填充屏幕区域并保持内容的宽高比的方法。 容器应缩放以覆盖整个屏幕,并保持其纵横比。图像的部分内容...

回答 1 投票 0

网格容器中的纵横比被其他列忽略

我遇到了 CSS 网格布局问题,该布局在 Chrome 中按预期工作,但在 Firefox 中却出现问题。具体来说,网格的第二列似乎忽略了

回答 1 投票 0

响应式方块网格

我想知道如何使用响应式方块创建布局。每个方块都有垂直和水平对齐的内容。具体示例如下...

回答 6 投票 0

在CSS中,最大化父级中给定宽高比的子级

这就是我想要的: 具有单个子元素的容器元素 容器元素已被指定宽度和高度 子元素已被赋予长宽比 子元素应该是...

回答 1 投票 0

如何正确更改 SwiftUI 图像的长宽比?

我拼命尝试将图像的长宽比更改为 16:9 而不拉伸它。 .aspectRatio(16/9, contentMode: .fill 或 .fit) 不可用,因为它纯粹是垃圾(地球上没有人...

回答 2 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.