前端 SCSS 图片自适应

定义了一个包含 imgCommon 混入（Mixin）和 .index-banner 样式的样式规则。下面是对代码的逐行解释：

代码解释

<style scoped lang="scss">

• scoped：这个属性表示样式仅应用于当前组件，避免影响全局样式。
• lang="scss"：指定使用 SCSS 语法，这是一种 CSS 预处理器语言，提供了变量、嵌套规则和混入等功能。

// 定义方法
@mixin imgCommon() {
    position: relative;
    overflow: hidden;
    img {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        object-fit: cover;
        transition: all .5s;
    }
}

• @mixin imgCommon()：定义了一个名为 imgCommon 的混入。混入是一种在多个选择器中复用样式的方式。

• position: relative;：设置包含 img 元素的容器的定位上下文，使 img 元素可以绝对定位。

• overflow: hidden;：隐藏超出容器范围的内容，确保图片不会溢出。

• img 选择器内的样式：

  • position: absolute;：绝对定位，使 img 元素可以根据其包含块的位置进行定位。
  • width: 100%; 和 height: 100%;：设置图片的宽度和高度为其包含块的 100%。
  • top: 0; 和 left: 0;：将图片定位到容器的左上角。
  • object-fit: cover;：使图片覆盖整个容器，保持其比例，同时裁剪超出部分。
  • transition: all .5s;：为图片添加过渡效果，持续时间为 0.5 秒。

// 使用方法
.index-banner {
    .img {
        display: block;
        width: 100%;
        padding-top: percentage(680/1920);  // 高/宽
        @include imgCommon();
    }
}

• .index-banner：定义了一个名为 index-banner 的样式规则。

• .img：选择器为 index-banner 内部的 img 元素。

  • display: block;：将 img 元素设置为块级元素，消除其默认的行内特性。
  • width: 100%;：设置 img 元素的宽度为其父容器的 100%。
  • padding-top: percentage(680/1920);：设置 img 元素的上内边距为根据宽度比例计算的高度。这是为了保持元素的宽高比，其中 percentage(680/1920) 计算出 680 高度与 1920 宽度的比例。
  • @include imgCommon();：在 .img 元素中包含之前定义的 imgCommon 混入，使其应用 imgCommon 混入中定义的样式规则。

总结

定义了一套样式规则和混入，便于在 Vue 组件中复用样式。imgCommon 混入处理了图片的绝对定位、尺寸调整、裁剪和过渡效果，而 .index-banner 则应用了这些样式，并调整了图片的显示和比例。通过这种方式，可以确保图片在各种屏幕尺寸和容器中都能正确显示，同时提供了平滑的过渡效果。