元素的纵横比描述了其宽度与高度之间的比例关系。
我有一个根 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>
我正在开发一种布局，其中父容器内的子元素必须始终保持 16:9 的宽高比。父容器的大小可以通过JavaScript动态调整，并且...
我有一个大图像，其CSS中的宽度由width: 1024px设置，并且还由max-width: 100%控制。高度也以px为单位指定，以便浏览器正确渲染页面...
我有一个 1280x720px 的视频，SAR = 540:401。 我的目的是，使用FFMPEG，将SAR设置为1，并获得最终分辨率1280*534。
有没有办法在 .NET MAUI 8 中使用 Aspect="AspectFill" 在其显示区域内对齐/定位 ，或者是否有一种解决方法可以产生相同的视觉结果？ 我正在尝试...
我发现这个CSS代码可以让我保持div的长宽比。 。容器 { 宽度：100%； 高度：100%； 背景颜色：红色； 位置：绝对； } .包装器{ 宽度：100%； /*
是否有机会通过最大高度选项保持 DIV 的纵横比？ 有一个保持纵横比的解决方案： div.stretchy-wrapper { 位置：相对； 宽度：100%； 底部填充：7...
我正在 FFMPEG 的帮助下从流创建视频，我还使用 FFPROBE 收集信息以在状态页面上使用，例如分辨率、编解码器等。 当 FFProbe 解析我的视频时
如何在不使用固定大小的情况下保证表格的每个单元格都变成正方形？当宽度改变时要做出响应。 桌子 { 宽度：90%； } TD { 宽度：30%； } tr { /** w...
为什么修饰符顺序会影响 Jetpack Compose 中宽高比的定位和大小？
实际上我正在阅读这个答案，但没有足够的有关宽高比的信息。 矩形屏幕： @可组合 有趣的矩形屏幕（修饰符：修饰符）{ 画布（修饰符.边框（7.dp，
我的页面上有一个组件（在示例中名为网格）。 我希望这个组件能够实现以下限制： -1- 保持 1:1 纵横比 -2- 尽可能大 -3- 留在...
HTML/CSS - 如何在使用宽高比时使内容适合可见页面？
我的页面上有一个组件（在示例中名为网格）。 我希望这个组件能够实现以下限制： -1- 保持 1:1 纵横比 -2- 尽可能大 -3- 留在...
使用 CSS 调整 html 元素大小并裁剪 html 元素
我正在寻找填充屏幕区域并保持内容的宽高比的方法。 容器应缩放以覆盖整个屏幕，并保持其纵横比。图像的部分内容...
我遇到了 CSS 网格布局问题，该布局在 Chrome 中按预期工作，但在 Firefox 中却出现问题。具体来说，网格的第二列似乎忽略了
我想知道如何使用响应式方块创建布局。每个方块都有垂直和水平对齐的内容。具体示例如下...
这就是我想要的： 具有单个子元素的容器元素 容器元素已被指定宽度和高度 子元素已被赋予长宽比 子元素应该是...
我拼命尝试将图像的长宽比更改为 16:9 而不拉伸它。 .aspectRatio(16/9, contentMode: .fill 或 .fit) 不可用，因为它纯粹是垃圾（地球上没有人...
我正在尝试使用此处详细介绍的“符号”方法来使用 SVG 精灵表。 http://css-tricks.com/svg-sprites-use-better-icon-fonts/ 我的 HTML 非常简单。 我正在尝试使用此处详细介绍的“符号”方法来使用 SVG 精灵表。 http://css-tricks.com/svg-sprites-use-better-icon-fonts/ 我的 HTML 非常简单。 <svg><use xlink:href="/images/iconSprite.svg#camera"/></svg> 这是 SVG 文件中的示例符号 <symbol viewBox="0 0 24 24" id="clock"><g transform="translate(0 -1028.4)"><path d="M22.085 1035.955a10.997 10.997-23.5 1 1-20.17 8.77 10.997 10.997-23.5 1 1 20.17-8.77z" fill="#1abc9c"/><path d="M21 1040.335a9 9 0 1 1-18 0 9 9 0 1 1 18 0z" fill="#ecf0f1"/><path d="M1.034 1039.8c-.083 1.7.176 3.3.875 4.9 2.42 5.6 8.898 8.2 14.468 5.8 4.29-1.9 6.778-6.2 6.593-10.6-.202 4-2.63 7.8-6.592 9.6-5.57 2.4-12.047-.2-14.47-5.8-.556-1.2-.82-2.6-.874-3.9z" fill="#16a085"/><path d="M20 1040.4c0 .5-.448 1-1 1h-6v-2h6c.552 0 1 .4 1 1z" fill="#3498db"/><path d="M12 1033.4c-.552 0-1 .448-1 1v5h2v-5c0-.552-.448-1-1-1z" fill="#2c3e50"/><path fill="#c0392b" d="M6.017 1045.705l4.95-4.95.707.707-4.95 4.95z"/><path d="M12 1038.4c-1.105 0-2 .9-2 2s.895 2 2 2 2-.9 2-2-.895-2-2-2zm0 1c.552 0 1 .4 1 1 0 .5-.448 1-1 1s-1-.5-1-1c0-.6.448-1 1-1z" fill="#34495e"/></g></symbol> 我遇到的问题是，当我使用 CSS 将 SVG 元素的宽度设置为 64px 时，SVG 的高度会自动设置为 150 像素。我尝试过设置 height:auto;高度：100%；在 SVG 元素上，但这没有什么区别。让它工作的唯一方法是设置 height:64px;我不想这样做，因为我的图标的长宽比可能并不总是方形的。我想要它做的是自动缩放 SVG 的原始宽高比，因此如果我将宽度设置为 400px，4:3 图标（由视图框定义）将自动获得 300px 的高度。 我已经阅读了几本关于缩放 SVG 和保留纵横比的指南，其中一些指南在使用 IMG 元素时提供了解决方案，但我找不到用于内联 SVGS 或通过 USE 使用外部 SVG 的解决方案。 有人知道适用于所有浏览器（包括 IE9+ 和 Android 4.0+）的解决方案吗？ 演示 您需要在链接到的每个元素上定义一个 viewBox。 因为一个 SVG 文档 中可以有不同的元素。 因此，请从链接到的元素中删除 viewBox。 在您链接的位置添加 viewBox。 我建议你将 viewBox 添加到 svg 元素中： <svg class="test" viewBox="0 0 25 25"> <use xlink:href="/images/iconSprite.svg#clock"/> </svg> 现在您可以缩放它： 如果定义了 css 宽度： .test { width: 50px; } 只要适合高度或宽度，它就会显示。 因此，如果您想要响应式设计，只需将其缩放％长度 .test { width:30%; } 缩放 SVG 一篇关于 CSS 技巧缩放 svg 的非常好的文章:) 在旧版本的 Safari 以及一些旧的 Android 浏览器中，设置视图框和宽度是不够的。 在我的例子中，我需要应用 height:100%;以及宽度。 我需要一个全宽的 svg（用作分隔线）。 viewBox 解决方案对我不起作用 - 没有显示图像。我使用 Illustrator 导出 svg。 对我有用的是使用 div （或者在我的例子中是 hr）并照常调整其大小。这实际上适用于任何图像类型，而不仅仅是 svg。 不确定这是否解决了 OP 精灵问题，但它确实解决了标题问题：“高度：SVG 上的自动不起作用”。 .svg-image { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>"); background-size: cover; width: 100vw; height: calc(100vw * 50 / 1000); /* viewport width * image height / image width */ height: 100px; } <hr class="svg-image"> 使用svg作为背景，然后设置
当保留相等的纵横比时，我面临着 matplotlib 的奇怪行为。 对于初学者来说，这是展示此行为的最小代码示例。首先是正确的行为，其次......