html - 当容器调整大小时,如何使圆圈保持形状?
问题描述
所以我现在在我的 html 页面中有以下内容,这是一个以 div 为中心的圆圈:
但是,我想要的是让圆形在进行窗口调整时保持其形状,例如:
如果我右键单击并检查,问题是我的圈子变成这样:
即使调整了外部容器的宽度或高度,如何确保圆的形状保持不变?
编辑:Derek.W 解决方案的扩展
现在,如果它不是基于整个窗口,而是基于一个包含元素呢?
* {
box-sizing: border-box;
}
html,body {
height: 100%;
}
.main_container {
border: 1px solid black;
height: 90%;
width: 100%;
}
.outer {
border: 1px solid black;
height: 20%;
width: 100%;
}
.child1 {
border: 1px solid black;
height: 50%;
}
.child2 {
border: 1px solid black;
height: 50%;
display: flex;
justify-content: center;
}
.circle {
border-radius: 50%;
width: 5%;
border: 1px solid black;
height: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<div class = "main_container">
<div class = "outer">
<div class = "child1"></div>
<div class = "child2">
<div class = "circle"></div>
</div>
</div>
</div>
</div>
</body>
</html>
解决方案
要制作一个完美的圆,高度和宽度必须相等。
所以你可以通过
.circle {
border-radius: 50%;
width: 10vh;
border: 1px solid black;
/* hight and width must be equal */
height: 10vh;
}
或使用px
.circle {
border-radius: 50%;
width: 120px;
border: 1px solid black;
/* hight and width must be equal */
height: 120px;
}
我一般都是用px的解决办法传上来的。
推荐阅读
- python - 如何修复,PostgreSQL BEFORE UPDATE 触发从 Django 端在与触发器无关的列上执行的选定列?
- laravel - 如何将es6代码转换成IE可以渲染的代码
- node.js - 是否可以将 json 对象数组转换为 sequelize 查询?
- php - CURL 在两个不同的服务器上给出不同的结果
- ios - 如何解决 UIView 动画中的问题?
- python - 从python中的列表中提取浮点数
- c# - VS2019 & Framework 4.7.2 升级后缺少文件 Microsoft.ServiceHub.HostLib.resources.DLL
- selenium - '无法创建新会话。' 将 selenium-server-standalone-3.9.1.jar 与 ChromeDriver 和 Chrome 一起使用时出错
- php - 将单个数组转换为多数组
- jquery - 如何修复 JavaScript 运行时错误:“$”未定义