Css---盒子宽高自适应（响应式布局）

Css自适应高度：今天用Ai帮我写一个按照16:9自适应的图片高度布局：

.course-cover {
    width: 140px;
    height: 0;
    padding-top: 78.75px; // 140 宽度下 16:9 高度 = 140 * 9 /16
    position: relative;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    .cover-img {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }
}

刚开始没理解。

这里是固定容器的高度，然后把元素本身高度设置为0，然后使用padding-top将高度撑起来，就比如：padding-top:78.75;

这里的值是通过：140的宽度下，16:9 高度 = 140 * 9/16 = 78.75px

为响应式设计，还可以使用百分比：

/* 响应式版本，宽度自适应，永远保持16:9 */
.course-cover {
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 9/16 */
  position: relative;
}

使用AI还是能够学到新知识的。

打完收工！