css - 如何创建可以流畅调整大小的 CSS 绘图？

Question

我如何使我的 CSS 绘图流畅，以便它们可以轻松调整大小并且可以代替 SVG 图像用于网站和应用程序？例如，这个 smiley face绘画。目前，窗口将其切断，因为它是以绝对单位设置的。我试过使用相对单位而不是像素，但调整大小只会移动图像的所有元素。

是否有一种 JS 方法可以均匀地更改所有单位以制作三种或四种尺寸的绘图？还是一种使用变量来改变每个元素同时保持相同比例和间距的方法？ This惊人的绘画似乎可以按照我想要的方式调整大小，但我无法通过自己查看代码来判断是什么让它响应。

我的示例图片:

  #head {
  height: 500px;
  width: 500px;
  /*   border: px solid yellow; */
  display: block;
  position: absolute;
  background-image: linear-gradient(-70deg, #c9bb34 1%, #fceb51 65%, #fcfcd7);
  left: 100px;
  border-radius: 50%;
  box-shadow: 5px 8px 10px;
}

#smile {
  position: relative;
  height: 200px;
  width: 200px;
  background-image: radial-gradient(#302e29 10%, black);
  left: 150px;
  top: 250px;
  border-radius: 10% 70% 20% 30%;
}

#smile-cover {
  /*   border: 1px solid red; */
  width: 100px;
  height: 170px;
  position: absolute;
  background: #fceb51;
  top: 260px;
  left: 100px;
  border-radius: 0 60% 20% 10%;
}

#left-eye {
  background-image: radial-gradient(#302e29 10%, black);
  position: absolute;
  width: 100px;
  height: 100px;
  top: 110px;
  border-radius: 50%;
  box-shadow: 5px 8px 10px;
}

#right-eye {
  background-image: radial-gradient(#302e29 1%, black);
  position: absolute;
  width: 130px;
  height: 150px;
  top: 100px;
  left: 240px;
  border-radius: 50%;
  box-shadow: 2px 2px 10px;
}

#left-eye-highlight {
  position: absolute;
  width: 18px;
  height: 23px;
  background-image: linear-gradient(#fceb51, #fcfcd7);
  top: 125px;
  left: 58px;
  /*   border: 1px solid red; */
  border-radius: 25% 60%;
}

#right-eye-highlight {
  position: absolute;
  width: 20px;
  height: 30px;
  background-image: linear-gradient(#fceb51, #fcfcd7);
  top: 125px;
  left: 320px;
  /*   border: 1px solid red; */
  border-radius: 25% 70%;
}

#left-eye-bottom {
  position: absolute;
  width: 70px;
  height: 60px;
  /*   border: 1px solid red; */
  border-radius: 50%;
  background-image: linear-gradient(-70deg, #fceb51 1%, #fcfcd7);
  transform: rotate(20deg);
  top: 190px;
  left: 10px;
}

#right-eye-bottom {
  position: absolute;
  width: 120px;
  height: 60px;
  /*   border: 1px solid red; */
  border-radius: 50%;
  background-image: linear-gradient(-45deg, #e3d234 1%, #fceb51 80%, #fcfcd7);
  transform: rotate(20deg);
  top: 210px;
  left: 230px;

<div id="head">
  <div id="smile"></div>
  <div id="smile-cover"></div>
  <div id="left-eye"></div>
  <div id="right-eye"></div>
  <div id="left-eye-highlight"></div>
  <div id="right-eye-highlight"></div>
  <div id="left-eye-bottom"></div>
  <div id="right-eye-bottom"></div>
</div>

}

Answer 1

您可以将所有固定的 px 单位更改为 %。首先，您需要定义 width 和 height 的基数，然后您需要找到任何 stat 与 width/ 之间的比率高度(padding-right/width 或padding-top/height)。在这种情况下，width 和 height 都等于 500px，这让生活变得轻松。

如何计算:

1. #head 的基值为 500 - width 和 height。暂时不要更改它们。
2. 取一个固定值(100px)，并计算100/500 * 100以求百分比值。
3. 用结果 20% 替换固定值。
4. 运行代码以查看一切都还在原地。
5. 重复 2-4 所有固定单元(除了头部的宽度/高度)被替换。
6. 替换头部的 width 和 height 值。我使用的是 vmin 值，您可以从 JS 控制它们。

结果:

#head {
  height: 100vmin;
  width: 100vmin;
  /*   border: px solid yellow; */
  display: block;
  position: absolute;
  background-image: linear-gradient(-70deg, #c9bb34 1%, #fceb51 65%, #fcfcd7);
  left: 20%;
  border-radius: 50%;
  box-shadow: 1% 1.6% 2%;
}

#smile {
  position: relative;
  height: 40%;
  width: 40%;
  background-image: radial-gradient(#302e29 10%, black);
  left: 30%;
  top: 50%;
  border-radius: 10% 70% 20% 30%;
}

#smile-cover {
  /*   border: 1px solid red; */
  width: 20%;
  height: 34%;
  position: absolute;
  background: #fceb51;
  top: 52%;
  left: 20%;
  border-radius: 0 60% 20% 10%;
}

#left-eye {
  background-image: radial-gradient(#302e29 10%, black);
  position: absolute;
  width: 20%;
  height: 20%;
  top: 22%;
  border-radius: 50%;
  box-shadow: 1% 1.6% 2%;
}

#right-eye {
  background-image: radial-gradient(#302e29 1%, black);
  position: absolute;
  width: 26%;
  height: 30%;
  top: 20%;
  left: 48%;
  border-radius: 50%;
  box-shadow: 0.4% 0.4% 2%;
}

#left-eye-highlight {
  position: absolute;
  width: 3.6%;
  height: 4.6%;
  background-image: linear-gradient(#fceb51, #fcfcd7);
  top: 25%;
  left: 11.6;
  /*   border: 1px solid red; */
  border-radius: 25% 60%;
}

#right-eye-highlight {
  position: absolute;
  width: 4%;
  height: 6%;
  background-image: linear-gradient(#fceb51, #fcfcd7);
  top: 25%;
  left: 64%;
  /*   border: 1px solid red; */
  border-radius: 25% 70%;
}

#left-eye-bottom {
  position: absolute;
  width: 14%;
  height: 12%;
  /*   border: 1px solid red; */
  border-radius: 50%;
  background-image: linear-gradient(-70deg, #fceb51 1%, #fcfcd7);
  transform: rotate(20deg);
  top: 38%;
  left: 2%;
}

#right-eye-bottom {
  position: absolute;
  width: 24%;
  height: 12%;
  /*   border: 1px solid red; */
  border-radius: 50%;
  background-image: linear-gradient(-45deg, #e3d234 1%, #fceb51 80%, #fcfcd7);
  transform: rotate(20deg);
  top: 42%;
  left: 46%;
}

<div id="head">
  <div id="smile"></div>
  <div id="smile-cover"></div>
  <div id="left-eye"></div>
  <div id="right-eye"></div>
  <div id="left-eye-highlight"></div>
  <div id="right-eye-highlight"></div>
  <div id="left-eye-bottom"></div>
  <div id="right-eye-bottom"></div>
</div>