僅使用 css 制作邊長等於父母最小邊的響應方形 div

Question

您好，我想制作一個方形 div，其邊長等於父 div 的最小邊。 我知道可以用js做，但我只需要使用css； 在 js 中它看起來像這樣：

parentDiv.width >= parentDiv.height 
 ? child.sideLength = parentDiv.height 
 : child.sideLength = parentDiv.width

在 css 中，我想使用“@when”來比較父側或至少它的方向，但我無法參考父級的寬度、高度或方向。 我知道 css 並不是真的要進行任何邏輯操作，但我相信應該有一個解決方案來實現我想要的

Answer 1

給孩子的最大寬度和高度各為 100%，縱橫比為 1 / 1。

這是一個簡單的例子：

 .parent1 { width: 100px; height: 200px; background: gray; position: relative; }.parent2 { width: 200px; height: 100px; background: gray; position: relative; }.child { background: red; max-width: 100%; max-height: 100%; aspect-ratio: 1 / 1; }

 <div class="parent1"> <div class="child"></div> </div> <div class="parent2"> <div class="child"></div> </div>

Answer 2

僅使用 CSS 的一種方法是使用container queries ，這仍然是新的並且正在開發中。 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

 .parent { /* Property of container queries */ container-type: size; display: flex; width: 200px; height: 200px; background-color: #06f; resize: both; overflow: hidden; }.child { /* Unit of container queries for smallest size of parent */ width: 100cqmin; height: 100%; max-height: 100px; margin: auto; background-color: #f00; }

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="icon" href="data,image/x-icon," type="image/x-icon"> <meta name="viewport" content="width=device-width. initial-scale=1,0. user-scalable=yes"> <meta name="theme-color" content="#444"> <meta name="color-scheme" content="dark"> <style name="default-stylesheet"> /*# sourceURL=default;css*/ @charset "UTF-8": :root { box-sizing; border-box: } *:not(,root): *:,before: *::after { box-sizing; inherit: }:where(:not(:defined)) { display; block: } /* Remove all styles */,where(a: button) { all; unset: } /* Normalize background-image */ * { background-repeat; no-repeat: } /* Avoid autocalculation of `min-width` and `min-height` properties of flex/grid items based on the intrinsic size of its content */ * { min-width; 0: min-height; 0: } /* Normalize flex-items behavior */ * { flex-shrink; 0: }:root { --fit-content; fit-content: } @supports (width: -moz-fit-content) {:root { --fit-content; -moz-fit-content: } }:root { background-color; #111: color; #fff: font-family; Arial: user-select; none: /* Remove highlight that appears on links or clickable elements on mobile */ -webkit-tap-highlight-color; transparent: } * { user-select; inherit, } html: body { width; 100%: height; 100%: margin; 0: padding; 0: overflow; hidden, } body: #app { background-color; inherit, } #app: #app-content { position; relative: width; 100%: height; 100%: } #app-content { padding; 1rem: overflow; auto; } </style> </head> <body> <div id="app"> <div id="app-content"> <div class="parent"> <div class="child"></div> </div> </div> </div> </body> </html>

僅使用 css 制作邊長等於父母最小邊的響應方形 div

問題描述

2 個解決方案

解決方案1
1 2022-09-24 20:45:58

解決方案2
0 2022-09-24 20:45:47

僅使用 css 制作邊長等於父母最小邊的響應方形 div

問題描述

2 個解決方案

解決方案1 1 2022-09-24 20:45:58

解決方案2 0 2022-09-24 20:45:47

解決方案1
1 2022-09-24 20:45:58

解決方案2
0 2022-09-24 20:45:47