关于background-size

今天在做50 projects 50 days 的项目 expanding-cards 的时候 遇到了一个问题

当图片尺寸特别大的时候 发现边框圆角出现了切角，不是光滑的圆弧形

对应代码

  .panel {
    background-size: auto 100%;
    background-position: center;
    background-repeat: no-repeat;
    height: 80vh;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    flex: 0.5;
    margin: 10px;
    position: relative;
    transition: flex 0.7s ease-in;
  }

copy课程源代码到本地发现依然是这个问题

进行问题复现时，发现在浏览器窗口宽度较小时，圆角为光滑圆弧形，随着拖动变宽，导致切角出现

修改background-size: auto 100%;为background-size: auto auto， 问题解决

摘录mdn关于background-size的部分描述

• 一个为 auto 另一个不是 auto:

如果图像有固有比例，则指定的长度使用指定值，未指定的长度由指定值与固有比例计算。如果图像没有固有比例，则指定的长度使用指定值，未指定的长度使用图像相应的固有长度，若没有固有长度，则使用背景区相应的长度。

参考链接