图片自适应

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

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

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

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

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

缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。和 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 是图片高度 */
}
posted @   前端小李子  阅读(45)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示