仅使用 css 制作边长等于父母最小边的响应方形 div
[英]Make responsive square div with a side length equal to parent's smallest side using only css
问题描述
Hello I want to make a square div with length of sides equal to smallest side of parent div.
您好，我想制作一个方形 div，其边长等于父 div 的最小边。 I know it is possible to do with js, but I need to use only css;我知道可以用js做，但我只需要使用css； in js it would look something like this:在 js 中它看起来像这样：
parentDiv.width >= parentDiv.height
? child.sideLength = parentDiv.height
: child.sideLength = parentDiv.width
in css I wanted to use "@when" to compare parent sides or at least its orintation, but I wasn't able to refer a parent's width, height or orientation.在 css 中，我想使用“@when”来比较父侧或至少它的方向，但我无法参考父级的宽度、高度或方向。 I know css isn't really meant to have any logical operations, but I belive there should be a solution to achive what I want我知道 css 并不是真的要进行任何逻辑操作，但我相信应该有一个解决方案来实现我想要的
2 个解决方案
解决方案1
1 2022-09-24 20:45:58
Give the child max width and height of 100% each and an aspect-ratio of 1 / 1.给孩子的最大宽度和高度各为 100%，纵横比为 1 / 1。
Here's a simple example:这是一个简单的例子：
.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>
解决方案2
0 2022-09-24 20:45:47
One way with just CSS would be using container queries which is still new and being developed.仅使用 CSS 的一种方法是使用container queries ，这仍然是新的并且正在开发中。 https://developer.mozilla.org/en-US/docs/Web/CSS/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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.