aspect-ratio 相关问题

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

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

css flexbox aspect-ratio

回答 1 投票 0

我使用 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>

css flexbox css-grid aspect-ratio

回答 1 投票 0

颤动图像缩放

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

flutter aspect-ratio image-scaling flutter-image

回答 1 投票 0

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

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

react-native aspect-ratio

回答 1 投票 0

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

我有一个二维数组，呈现一个正方形网格。网格应该是一个正方形，并且每个正方形都应该是一个正方形，如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>

react-native aspect-ratio

回答 1 投票 0

根据高度保持div长宽比

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

css responsive-design aspect-ratio

回答 7 投票 0

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

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

macos swiftui window aspect-ratio

回答 1 投票 0

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">  <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>

html display css-tables aspect-ratio

回答 2 投票 0

如何为所有轴（x，y，z）设置“相等”纵横比

当我为 3d 图形设置相等的纵横比时，z 轴不会变为“相等”。所以这：图 = pylab.figure() mesFig = fig.gca(projection='3d', adjustable='box') mesFig.axis('等于') 我...

python matplotlib axis aspect-ratio matplotlib-3d

回答 10 投票 0

如何让视频覆盖其容器并保持原始宽高比

在 Flutter 中，如果我想要任意图像覆盖 300x300 空间，我可以使用 SizedBox 和 FittedBox 来实现：尺寸框( 身高：300，宽度：300，孩子：FittedBox（ ...

flutter video aspect-ratio

回答 0 投票 0

CSS 带有 flex 的空 div 以扩展并保持纵横比

我正在尝试创建一个空的 div，它使用 flex: 1 或 flex-grow: 1 扩展到它的可用空间，但使用 aspect-ratio: 16/9 保持纵横比我已经尝试了很多例子，包括原...