图片自适应

​ 图片自适应相信对于前端小伙伴来说 并不陌生吧 每次遇到的时候就是去网上百度 MDN 掘金等去找
然后找到的又不能完全符合我们的大多数需求 所以今天我就把最近解决图片自适应的方法放在这里

概念
首先，我这里用的方法是背景图片 background，我们先来看看MDN对background-size的描述

​ 值，指定背景图片大小，不能为负值。

​ 值，指定背景图片相对背景区（background positioning area）的百分比。背景区由background-origin设置，默认为盒模型的内容区与内边距，也可设置为只有内容区，或者还包括边框。如果attachment 为fixed，背景区为浏览器可视区（即视口），不包括滚动条。不能为负值。

​ 以背景图片的比例缩放背景图片。

​ 缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的 左/右 或者 上/下 部分会被裁剪。

​ 缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。

当然用的最多的就是cover,container

cover:他会覆盖所在的容器 会出现被裁剪的情况

container:缩放图片 放入背景区 可能会出现背景区上下/左右空白的情况

图片等比自适应 一

我这里用的方法是cover,假设width为100%的情况下，要想图片不被裁剪，就需要背景高度/宽度 == 图片高度/宽度

但是你这个宽度可以设置100%，高度怎么设置呢，我们注意 cover 对图片进行缩放时会保持图片的宽高比例，但是我们

不给背景盒子设置高度的话 哪怕设置了cover 也会出现高度坍塌的问题 那么这里可以用padding-top来把盒子撑开

.quantumCompute_banner {
    width: 100%;
    /*height: 477px;*/
    /*height: 632px;*/
    padding-top: 33.03%;/*  高度 / 宽度  * 100%     336/1017*100%   */
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

注意 padding-top的值 是 高度/宽度*100%

**图片等比自适应 二

另一种方案 是 aspect-ratio 他会让元素保持一定的比例 这里直接弄成和图片的宽高一样就行

.quantumCompute_banner {
    width: 100%;
    /*height: 477px;*/
    /*height: 632px;*/
    /*padding-top: 33.03%;/*  高度 / 宽度  * 100%     336/1017*100%   */*/
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    aspect-ratio: 1440 / 361;/*  1440是图片宽度  361 是图片高度 */
}