CSS 还是 jQuery？如何根据具有灵活大小的容器获得圆形？ [复制]

Posted 2023-03-06

【中文标题】CSS 还是 jQuery？如何根据具有灵活大小的容器获得圆形？ [复制]

【英文标题】：CSS or jQuery? How to get circle based on container with flexible size? [duplicate]

【发布时间】：2021-09-03 13:13:18

【问题描述】：

这是我的代码：

html,
body 
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;


#container 
  width: 50%;
  height: 50%;


#shape 
  border: 20px solid red;
  height: 100%;
  width: 100%;
  border-radius: 50%;

<div id="container">
  <div id="shape"></div>
</div>

容器总是应该用一个完美的圆来填充，而不是这样的椭圆。所以#shape 的height 和width 应该始终相同，并且应该尽可能好地填充#container。

是否可以仅使用 CSS 来做到这一点？还是需要 jQuery？

【参考方案1】：

html,
body 
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;


#container 
  width: 50vw;
  height: 50vw;


#shape 
  border: 20px solid red;
  height: 100%;
  width: 100%;
  border-radius: 50%;

<div id="container">
  <div id="shape"></div>
</div>