CSS 怎么实现宽高自适应的正方形

7月前作者：--- --- 分类：Toy博客阅读(27) 违法举报

这篇具有很好参考价值的文章主要介绍了CSS 怎么实现宽高自适应的正方形。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

方法一，使用vw

 <div style="width: 20vw; height: 20vw; background-color: black"> </div>

方法二使用百分比

<div
    style="
      width: 20%;
      padding-top: 20%;
      /* padding-top或padding-bottom都可以 */
      background: #696969;
    "
  >

方法三，使用aspect-ratio

<div class="width: 200px; aspect-ratio: 1; background-color: red;"> </div>

方法四，使用em或者rem

  <div style="font-size: 10px">
    <div style="width: 20em; height: 20em; background-color: bisque"></div>
  </div>

方法五,直接给固定的宽高

 <div style="width: 200px; height: 200px; background-color: blue"></div>

文章来源地址https://www.toymoban.com/news/detail-406080.html

到了这里，关于CSS 怎么实现宽高自适应的正方形的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

leetcode 221 最大正方形 + 1277 统计全为1的正方形子矩阵

题目在一个由 ‘0’ 和 ‘1’ 组成的二维矩阵内，找到只包含 ‘1’ 的最大正方形，并返回其面积。示例输入：matrix = [[“1”,“0”,“1”,“0”,“0”],[“1”,“0”,“1”,“1”,“1”],[“1”,“1”,“1”,“1”,“1”],[“1”,“0”,“0”,“1”,“0”]] 输出：4 解析题外话，首

2024年02月07日
浏览(30)
Python-彩色正方形

核心代码核心代码核心代码

2024年02月19日
浏览(27)
LeetCode-221. 最大正方形

题目来源 221. 最大正方形现在我们需要找到只包含 ‘1’ 的最大正方形。首先，我们可以初始化一个和原始矩阵相同大小的矩阵 dp，用来记录每个格子所在的最大正方形的边长。对于第一行和第一列的格子，它们的 dp 值只能是 0 或 1，因为它们的左侧或上侧没有格子。我们

2023年04月11日
浏览(28)
python绘制螺旋正方形

1.首先导入画图功能库turtle 2.设置画笔大小，颜色 turtle.pensize() turtle.pencolor() 3.如何绘制：螺旋正方形一开始外边有3条长度相同的边，先勾勒出一条边循环3次将外边构出，里边每勾勒一条循环两次，再进行循环，即需要一个双循环，边每次比前一次缩短。画笔前进 turt

2024年04月15日
浏览(31)
力扣221.最大正方形（动态规划）

思路：思路：从[0,0]元素开始，计算每个元素对应其与[0,0]之间矩阵块中最大正方形边长情况：1）matrix [ i , j ] = ‘0’ -- 元素对应的最大正方形为0。情况：2）matrix [ i , j ] = ‘1’ -- max ( matrix [ i-1 , j ] , matrix [ i - 1 , j - 1 ) ,matrix [ i , j - 1 ] ) + 1 具体实现：1）先找出第一行和第

2024年02月13日
浏览(25)
P1387 最大正方形题解

通过二维前缀和判定矩形内是否全为1，计算和等于长度的平方就判断为是复杂度 (Theta (n^2log{n})) 设状态 (f_{i,j}) 为以第 (i) 行 (j) 列为右下角的最大正方形的边长, (a_{i,j}) 表示输入矩阵中的数值，有转移方程： [f_{i,j} = (min(f_{i-1,j},f_{i,j-1},f_{i-1,j-1}) + 1) * a_{i,j}] 解释：

2024年02月16日
浏览(28)
洛谷 P1387 最大正方形题解

通过二维前缀和判定矩形内是否全为1，计算和等于长度的平方就判断为是复杂度 (Theta (n^2log{n})) 设状态 (f_{i,j}) 为以第 (i) 行 (j) 列为右下角的最大正方形的边长, (a_{i,j}) 表示输入矩阵中的数值，有转移方程： [f_{i,j} = (min(f_{i-1,j},f_{i,j-1},f_{i-1,j-1}) + 1) * a_{i,j}] 解释：

2024年02月16日
浏览(31)
【LeetCode-中等】221. 最大正方形（详解）

在一个由 \\\'0\\\' 和 \\\'1\\\' 组成的二维矩阵内，找到只包含 \\\'1\\\' 的最大正方形，并返回其面积。力扣原题链接暴力法一般不是最优解，但是可以拿来练手由于正方形的面积等于边长的平方，因此要找到最大正方形的面积，首先需要找到最大正方形的边长，然后计算最大边

2024年02月13日
浏览(38)
将正方形矩阵顺时针转动 90°

【题目】给定一个 N×N 的矩阵 matrix，把这个矩阵调整成顺时针转动 90°后的形式。例如： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 顺时针转动 90°后为： 13 9 5 1 14 10 6 2 15 11 7 3 16 12 8 4 【要求】额外空间复杂度为 O(1)。思路：这里使用分圈处理的方式，在矩阵中用左上角的坐标(tR,tC)和

2024年02月13日
浏览(24)
最大正方形（力扣）暴力 + 动态规划 JAVA

在一个由 ‘0’ 和 ‘1’ 组成的二维矩阵内，找到只包含 ‘1’ 的最大正方形，并返回其面积。示例 1：输入：matrix = [[“1”,“0”,“1”,“0”,“0”],[“1”,“0”,“1”,“1”,“1”],[“1”,“1”,“1”,“1”,“1”],[“1”,“0”,“0”,“1”,“0”]] 输出：4 示例 2：输入：m

2024年02月15日
浏览(51)