aspect-ratio 相关问题

如果父元素是 Flex 元素，则不会出现具有宽高比的空 div

请查看下面的代码片段：为什么我看到第一个具有正确宽高比的空 div，但看不到包裹在 Flex 元素中的同一个盒子？在第二种情况下我该怎么做才能看到...

了解屏幕尺寸

在网站上我看到下一张图片： 如何理解例如iPhone 12上的屏幕尺寸为390 x 844，而iPhone 12的屏幕分辨率为2532 x 1170，为什么这里是390 x 844？ 网站 - 移动屏幕...

当flex-direction设置为column时，如何将flex容器中元素的长宽比固定为1？

我在一个弹性容器中有几个元素（在本例中为 3 个，但我希望它适用于任意数量的元素）。 它们在宽屏幕上排列成行，在窄屏幕上排列成列。 呃...

JSXGraph NumberLine、React&Storybook：如何保持响应 dsn 的纵横比恒定 (1:1) b-n 水平和垂直单位（x 和 y 缩放 eq-ly）？

使用 React 和 Storybook 的 JSXGraph Number Line：如何保持水平和垂直单位之间的纵横比恒定 (1:1)（这意味着 x 和 y 轴等比例缩放）以实现响应...

与下方图像的尺寸和位置完全相同的叠加

我在 nuxt 模板中有一张图像。我希望叠加层具有精确的图像大小和位置。我事先不知道图像的长宽比。 ... 我在 nuxt 模板中有一张图像。我希望叠加层具有精确的图像大小和位置。我事先不知道图像的长宽比。 <template> <div> <div class="overlay"></div> <img class="img" :src="image?.imageSrc" :alt="image?.id" /> </div> </template> <script setup lang="ts"> import { Image } from "~/types/interfaces/image"; defineProps({ image: { type: Object as () => Image | undefined, default: () => ({}) as Image, }, }); </script> <style scoped lang="scss"> .overlay { background-color: green; } .img { max-width: 100%; max-height: 100%; } </style> 在img class和overlay class的父div中添加类名。 <template> <div class="box"> <div class="overlay"></div> <img class="img" :src="image?.imageSrc" :alt="image?.id" /> </div> </template> 为 CSS 和 box div 添加 overlay div，如下所示， .box { position: relative; } .overlay { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: green; opacity: 0.7; } .img { max-width: 100%; max-height: 100%; } 您将看到绿色覆盖图像的大小。您还可以通过更改 box div 的大小来使用自定义图像尺寸 图片：

如何在 2x2 网格中嵌入四个 YouTube 视频（16:9 响应式），根据屏幕尺寸，该网格可以变成 1x4 网格？

我正在尝试在空间有限的 HTML 页面中嵌入四个 YouTube 视频。根据屏幕尺寸，我希望将它们排列在 2x2 网格中，但可以折叠成 1x4 网格应该屏幕

在场景上定位节点以适用于所有屏幕尺寸 SpriteKit

我已经尝试了所有方法，但似乎没有任何方法可以为通用 SpriteKit 游戏定位节点。我目前使用 .AspectFill 作为我的缩放比例，并且我尝试过变得不必要的复杂

如何使收缩/扩展以实现纵横比与 twinx/twiny 一致？

当我使用 python 库 matplotlib 添加 twinx 和/或 twiny 轴时，指定纵横比的效果变得不一致： 当我设置没有 twinx/twiny 的纵横比时，轴是动物园...

如何在 SymPy 中更改图形的纵横比？

我试图用 sympy 绘制一个简单的环面。我想使用该图作为图像。 不幸的是，轴的纵横比使图像看起来很长。 在代码中我尝试更改...

如何包裹“AspectRatio”小部件以避免黄/黑溢出线？

这是我的代码（完整的项目代码：https://github.com/mitchkoko/responsivedesign）： 导入“包：flutter/material.dart”； 导入'包：flutter/rendering.dart'; 类 MyDesktopBody 扩展...

我在android中的OpenGLES中有一个平面，我将相机帧渲染为纹理，我想升级纹理以保持纵横比

我有一个带有渲染器和多个着色器程序的 GLSurfaceView。在其中一个着色器程序中，渲染方形几何体并使用纹理为几何体着色。纹理使用...

以编程方式设置 imageView 的宽高比

我在显示没有 centerCrop 的横向图像时遇到问题。 我尝试了 PercentFramelayout，并以编程方式设置宽高比 像这样： laParams.percentLayoutInfo.aspectRatio = img.width.

CSS：父div忽略子宽度

我正在使用图像来保持 div 的宽高比为 1:1。 div 应该填充弹性容器内的可用高度。弹性容器的宽度应适合其内容。 方格 h...

如何在横向和纵向布局上使用 CSS 网格中的宽高比来保持宽高比

我使用 Grid 和 Flexbox 布局了以下元素： 标题 我使用 Grid 和 Flexbox 布局了以下元素： <div class="container"> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> </div> 我希望将 .inner 元素布置在 2×2 网格中，并且 .square 元素保持纵横比为 1。 到目前为止我有以下CSS： .container { width: 100vw; height: 100vh; background: lightblue; display: grid; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; } .inner { background: lightpink; display: flex; flex-direction: column; align-items: center; } .square { background: lightgreen; aspect-ratio: 1; flex-grow: 1; } 当视口的宽度大于高度（例如横向）时，此方法效果很好： 但是当高度大于宽度时（例如纵向），正方形会重叠： 我可以通过将 align-items: center; 中的 .inner 更改为 align-items: self 来解决纵向问题，但这会破坏横向布局。 有什么方法可以让它在两者上都工作吗？ CodePen 在这里：https://codepen.io/danielgibbsnz/pen/KKbWoWL（只需将窗口大小调整为纵向即可看到问题）。 注意： 我理想地希望使用 aspect-ratio 来完成此操作，而不是诉诸填充黑客（如果可能的话）。 这样的东西效果会更好吗？ （注意：它涉及正方形的随机宽度，所以可能不是你想要的。） body { margin: 0; } .container { width: 100vw; min-height: 100vh; background: lightblue; display: grid; grid-template-rows: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 20px; } .inner { background: lightpink; display: grid; place-items: center; } .square { background: lightgreen; aspect-ratio: 1; width: 70%; } <div class="container"> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> <div class="inner"> <h2>Title</h2> <div class="square"></div> </div> </div>

颤动图像缩放

我有一个 700x17034 的图像。我可以这样缩放它：缩放图像。正如您所看到的，图像上的文字可以非常清晰地阅读。我想在颤振中做到这一点。图片的宽度将是...

纵横比在兄弟元素之间造成间隙

我有一个二维数组，呈现一个正方形网格。网格应该是一个正方形，并且每个正方形都应该是一个正方形，如aspectRatio 为1。 基本网格如下所示： 函数网格（...

纵横比在兄弟元素之间造成间隙

我有一个二维数组，呈现一个正方形网格。网格应该是一个正方形，并且每个正方形都应该是一个正方形，如aspectRatio 为1。 基本网格如下所示： 我有一个二维数组，呈现一个正方形网格。网格应该是一个正方形，并且每个正方形都应该是一个正方形，如aspectRatio 为1。 基本网格如下所示： <View> <View style={styles.container}> {board.map((row, i) => { return ( <View key={i} style={styles.row}> {row.map((square, j) => { return <View style={styles.square}>{square}</View> })} </View> ); })} </View> </View> const getStyles = (dimension: number) => { return StyleSheet.create({ container: { width: "100%", }, row: { flexDirection: "row", gap: 4, marginBottom: 4, width: "100%", }, square: { flex: 1, display: "flex", justifyContent: "center", alignItems: "center", aspectRatio: 1, } }); }; This code renders a correct grid of squares. The gap and margin create the illusion of borders but this way there are no borders on the sides of the page. The issue is that depending on the size of the grid, 5x5, 6x6, etc, there will be random gaps between rows. It's almost as if the math doesn't check out, like the screen width mixed with the amount of squares/columns/rows and the gap/margin size is making it impossible to render perfect squares. Is that possible? Is there a way to figure out the perfect aspect ratio to render squares while extending the full width of the screen? I feel like it should be possible or there should be a way to make the aspect ratio fill up available space. I don't mind if the squares aren't perfect as long as there are no unwanted gaps between rows or columns and as long as the grid covers the full width of the screen. 尚不清楚问题是什么，但如果您希望水平排列行中的项目，则可能需要将 display: flex 添加到行中。 （这也可能是默认设置/不适用于本机反应。） .container { width: 100%; } .row { display: flex; /* missing display: flex */ gap: 4px; margin-bottom: 4px; } .square { flex: 1; display: flex; justify-content: center; align-items: center; aspect-ratio: 1; background: aliceblue; } <div class="container"> <div class="row"> <div class="square">{square}</div> <div class="square">{square}</div> <div class="square">{square}</div> <div class="square">{square}</div> </div> <div class="row"> <div class="square">{square}</div> <div class="square">{square}</div> <div class="square">{square}</div> <div class="square">{square}</div> </div> </div>

根据高度保持div长宽比

我需要将元素的宽度保持为其高度的百分比。因此，随着高度的变化，宽度也会更新。 通过使用 padding-top 的 % 值可以实现相反的效果，但是 paddin...

如何在 SwiftUI（不是 Cocoa）中设置 MacOS 应用程序容器窗口的宽高比

XCode 14.3.1。运行 Ventura 13.4.1 的 Mac。 我有一个时钟应用程序，其中视图的宽高比被限制为 1 比 1。 然而，包含窗口可以调整大小，但没有宽高比限制...

CSS height 属性不适用于显示：表格？

<main class="table-container"> <div id="table-row"> <section id="product-image" class="table-column"> <img src="https://lh3.googleusercontent.com/pw/AIL4fc8rzyaDFLe2uyFDdLC37ni6h2hoaEcvBkxtIKD4C_CsCscJB1nEIOBSkfi50g1juG9_AwqblO_aamPn2lId6cXOusbgZ0dY54ifsbHzoZ1o6krpArxXZTey9xOKIM08vBVClOKH6815Yc0oHP4Qu-Di3LyAKew8xk1XgFcMlWPW5aZb72JSBZGsXFCFVN9sSeENkBNakQXuCTL87Dd_3M6nZIRkM9hGctJbKo__4kcIjs6n-Y3rdAxyz2T2RriVvwnsJHLD_MiuQj2LFhkISoKUoYyROFzvNFS2ln_PiIC90M4rKrO89ioBoIZ-zc-4ilxcMtB66ukR04sSc6_vAD-6ZKjxYVkmYW5LIbmY_3Z3XeOMKG6BgLWOLRRB5sLFCoZCP4Hka8ahKC_whIthNlCEEDaJAi1ceeWJv1b2y2WN7V2RuBMR2L28B0tj584gujMkbKkO3xv04xUFrQyEZT1f3n96lmkYy5NLizwWz-dCOayXyuocWqcPJ0xfUD9y9G8XjnoueZVc383VO9v-vxMG1U38RpwRw2Y6zqAsheoiLli2k8_ol_37RjVhlmw6986SPe8SCoDjuZHT4g_SUQulcbXaVgim0BkpAyuXvMk2-WJK3NYGAI6X4GSrcCwBLKKtQODC_TPz7ZYN-HqLE78NnL_TpBbZBGBsXvj27EwVAWknph-bs2H46CGkaIQ2Q-nKH2CLEbMD9MmyGLgOjQ7kOCKpwdzpEXzk8pPZLU9IVVynm00aFnA5-JRHm1K427WmyMIbRl_88GbF4tG7AHtAnqRppB04QjaUzKuzn1oiXdqaiMIL8NIxi_MvSK7lcHhBPUHHKv_Bi7ac6NvLi40cfOoohw8oeNt6vHAWWEYh6y5YguA6ggFk9Ri2UsmOH4A94qYEGWMndyRMiiMz737Ca5QcIwtSyUu3mimFfHfAcoNN5NxemTQuqy2iDkDio4n6dCCW9b-fsJNH3nuXdU74MQzl2sxNYGYr9xgcVDAQ1r_1F33Ny7lXhCPxHjn07Ro=w572-h857-s-no?authuser=0" alt="image of perfume Product" id="mobile" /> </section> <section id="description" class="table-column"> Perfume Gabrielle Essence Eau De Parfum A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL. $149.99 $169.99 Add to Cart </section> </div> </main> body { background-color: hsl(30, 38%, 92%); } main { border: 1px solid blue; margin: auto; width: 55vw; height: 41.25vw; } div { border: black; width: 100%; height: 100%; } section#product-image { border: 1px solid red; width: 50%; } section#product-image img#mobile { width: 100%; height: auto; } #description { background-color: rgb(255, 255, 255); } .table-container { display: table; } .table-row { display: table-row; } .table-column { display: table-cell; vertical-align: top; } 对于 main （表格容器），我使用 vw 值作为高度，但不起作用。所以，我使用了 px 值，但仍然不起作用。我的目标是使 section#product-image 的尺寸具有 img#mobile 图像尺寸的纵横比（重量与高度的比率）。因此，使用 width: 100% 和 height: auto 时，图像完全填充容器。图像的长宽比为2/3。 请参考原帖的评论。请尝试以下HTML：- <main class="table-container"> <div class="table-row"> <!-- Added the CSS class "table-row" here --> <section id="product-image" class="table-column"> <img src="<Your Image URL>" alt="image of perfume Product" id="mobile" /> </section> <section id="description" class="table-column"> Perfume Gabrielle Essence Eau De Parfum A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL. $149.99 $169.99 Add to Cart </section> </div> </main> PS：别忘了在上面的代码中粘贴img URL。 这是修改后的.css定义：- body { background-color: hsl(30, 38%, 92%); } main { border: 1px solid blue; margin: auto; width: 55vw; } div { border: black; width: 100%; } section#product-image { border: 1px solid red; width: 50%; padding-bottom: calc(100% * 3 / 2); position: relative; overflow: hidden; } section#product-image img#mobile { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0; } #description { background-color: rgb(255, 255, 255); } .table-container { display: table; } .table-row { display: table-row; } .table-column { display: table-cell; vertical-align: top; } 希望这是您正在寻找的。您可以尝试修改 .css 定义来查看显示行为 问题是照片下方的间隙？使用line-height: 0 section#product-image { border: 1px solid red; width: 50%; line-height: 0; } body { background-color: hsl(30, 38%, 92%); } main { border: 1px solid blue; margin: auto; width: 55vw; height: 41.25vw; } div { border: black; width: 100%; height: 100%; } section#product-image { border: 1px solid red; width: 50%; line-height: 0; } section#product-image img#mobile { width: 100%; height: auto; } #description { background-color: rgb(255, 255, 255); } .table-container { display: table; } .table-row { display: table-row; } .table-column { display: table-cell; vertical-align: top; } <main class="table-container"> <div id="table-row"> <section id="product-image" class="table-column"> <img src="//picsum.photos/200/300" alt="image of perfume Product" id="mobile" /> </section> <section id="description" class="table-column"> Perfume Gabrielle Essence Eau De Parfum A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL. $149.99 $169.99 Add to Cart </section> </div> </main>