个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
感谢您花时间看看我的困境。
我想要做的是用 HTML/CSS 中的其他方形 div 的 3x3 网格填充一个完美的方形 div。我希望容器居中，占据页面的整个高度(从不滚动)并动态调整大小，同时在调整视口(viewport)大小时保持其纵横比。组成这个较大正方形的 9 个单元格中的每一个单元格都应动态调整大小并保持其纵横比。
这是我在真正陷入只有 WIDTH 受到影响的事实之前所得到的。当我调整窗口大小时，高度需要动态变化。
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="homestyle-test.css">
</head>
<body>
<div class="mainframe">
<div class="grid">
<div class="grid__item">
<div class="content">
<div class="content-inside">
<p>Upper left</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content">
<div class="content-inside">
<p>upper middle</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content content-lr">
<div class="content-inside">
<p>upper Right</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content">
<div class="content-inside">
<p>middle Left</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content">
<div class="content-inside">
<p>middle</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content content-lr">
<div class="content-inside">
<p>middle Right</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content">
<div class="content-inside">
<p>Lower Left</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content">
<div class="content-inside">
<p>Lower middle</p>
</div>
</div>
</div>
<div class="grid__item">
<div class="content content-lr">
<div class="content-inside">
<p>Lower Right</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
html{
background: url(home-assets/homebgtest.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
place-items: start;
}
.grid > * {
background: orange;
width: 100%;
}
.grid > [style^='--aspect-ratio']::before {
content: "";
display: inline-block;
width: 1px;
height: 0;
padding-bottom: calc(100% / (var(--aspect-ratio)));
}
最佳答案
请根据您对完美正方形的要求查看以下工作片段，希望对您有所帮助:)
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.wrap {
max-width: 100vh;
margin: 0 auto;
}
.grid {
display: grid;
height: 100vh;
grid-template-columns: 1fr 1fr 1fr;
}
.grid>* {
background: orange;
padding: 20px;
box-shadow: inset 0 0 0 1px #fff;
}<div class="wrap">
<div class="grid">
<div class="grid__item">
Upper left
</div>
<div class="grid__item">
upper middle
</div>
<div class="grid__item">
upper Right
</div>
<div class="grid__item">
middle Left
</div>
<div class="grid__item">
middle
</div>
<div class="grid__item">
middle Right
</div>
<div class="grid__item">
Lower Left
</div>
<div class="grid__item">
Lower middle
</div>
<div class="grid__item">
Lower Right
</div>
</div>
</div>关于html - 使用视口(viewport)动态调整 3x3 正方形网格的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51884189/
25
4
0
我试图使用 显示正方形(如元素符号正方形) .squares{ list-style-type: square; display:inline; } 但我希望它们是水
这是关于在作为 4 个 div 的一部分的 1 个 div 中嵌套 4 个 div(正方形)... 我在包装器中使用 display: flex 并用于包装的元素本身，否则它不会工作 对我来说，这感觉
这是图像，我想填充此矩形或正方形的边缘，以便可以使用轮廓对其进行裁剪。到目前为止，我所做的是我使用了canny边缘检测器来找到边缘，然后使用bitwise_or或将这个矩形填充了一点，但没有完全填充。
我希望能够在图片框内创建 X x Y 数量的框/圆圈/按钮。完全像 Windows 碎片整理工具。 我尝试创建一个布局并不断向其添加按钮或图片框，但速度非常慢，在添加 200 个左右的图片框后它崩溃，
我正在尝试从图像(肺部图像)中提取 3 个区域，这些区域在软组织中显示，每个区域都是具有特定高度和宽度的正方形，例如宽高各10mm，如下图， 如图所示，该区域也是均匀的，这意味着它只包含相同的颜色(在
在我左键单击它后，我试图让一个正方形跟随我的鼠标。当我右键单击时，方 block 应该停止跟随我的鼠标。 我的程序检测到我在方 block 内单击，但由于某种原因，它没有根据 Mouse.getDX/
已经花了几个小时在这上面了(因为我还在学习)，所以也许你们可以帮忙。问题是我无法弄清楚如何将二维数组划分为所有可能的 nxn 正方形。 我正在随机化二维数组，可以说它是这样的: 1 0 1 0 2
使用 Graph API，我可以获得小型、大型、中型图片。或者我可以获得小方形图片。 但是我怎样才能得到大方形图片呢？有什么服务可以使用吗？ 最佳答案 很简单，我刚发现这个。 例子， https://
我是 HTML 和 CSS 的新手。 尝试创建 3 x 3 正方形“图片”，使用 ，但无法找到将正方形放在页面中间的简单解决方案，例如中间有九个正方形。 如何把所有的方 block 都放在大边框的正方
我正在玩弄 CSS 动画以获得乐趣。我有限的经验阻碍了这一进程。 下面的脚本将圆形转换为三 Angular 形，再转换为正方形，然后反转。然而，圆形和三 Angular 形之间的动画有一个小错误。我希
我的标准布局(最小宽度 1024 像素)有 4 行。第一个和最后一个有 6 个正方形，中间有两个组合正方形。但是第三行的第一个方 block 不见了。我没有使用不同的 CSS 设置。我试过 clear
关闭。这个问题需要更多focused .它目前不接受答案。 想改进这个问题吗？ 更新问题，使其只关注一个问题 editing this post . 关闭 7 年前。 Improve this q
我的网站上有 4 张图片，我试图对其进行定位，以便它们在我的 DIV 中形成一个相等的正方形，但它看起来像一条由 4 张图片组成的垂直线。我希望它看起来像 2 个图像的 2 条垂直线，彼此相邻，使其成
这是方 block 检测示例的输出我的问题是过滤这个方 block 第一个问题是它为同一区域绘制多条线； 第二个是我只需要检测对象而不是所有图像。 另一个问题是我必须只取除所有图像之外的最大对象。 检
我正在绘制一个带有移动立方体(正方形，因为它是 2d)算法的元球。一切都很好，但我想将其作为矢量对象获取。 到目前为止，我已经从每个事件方 block 中得到一两条矢量线，将它们保存在列表线中。换句话
实际上，我有一个适用于 Android 1.5 的应用程序，其中包含一个 GLSurfaceView 类，它在屏幕上显示一个简单的方形多边形。 我想学习如何添加一个新功能，即移动用手指触摸的方 blo
如果我有一个包含多个子组件的 JPanel，我该如何使 JPanel 保持正方形，而不管其父组件的大小如何调整？我尝试了以下代码的变体，但它不会导致子组件也变成正方形。 public void pai
我找到了 this answer ，它确保 ImageView 的宽高比得以保留。 我如何使用带有可绘制背景的 TextView 来做到这一点？我有这个 TextView: 这是我的背
这个问题在这里已经有了答案: Maintain aspect ratio of a div according to height [duplicate] (1 个回答) 关闭 8 年前。 是否可以
如何创建 div Logo ，如下图所示: 这是我在 JsFiddle 中创建的 主要问题是如何将两个形状如下图的盒子连接起来，有人可以提出建议吗？ body,html { width: 100%
我是一名优秀的程序员,十分优秀！