图片自适应
图片自适应相信对于前端小伙伴来说 并不陌生吧 每次遇到的时候就是去网上百度 MDN 掘金等去找
然后找到的又不能完全符合我们的大多数需求 所以今天我就把最近解决图片自适应的方法放在这里
概念
首先,我这里用的方法是背景图片 background,我们先来看看MDN对background-size的描述
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 是图片高度 */
}
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库