背景图片宽高自适应实现

.banner {

width: 100%;

background: url(/image/excellentCase/banner_pc.png?v=202106151044) no-repeat;

background-size: 100% auto;

padding-top: 16%;

height: 0;

}

图片的像素为：3840 x 602

计算百分比：602 / 3840 约等于 16

原理：padding的百分比是依据元素的宽度

背景图片宽高自适应实现相关推荐

css控制图片拉伸不变形,css+background实现图片宽高自适应，拉伸裁剪不变形
图片宽高不固定 ,一样实现自适应,拉伸裁剪不变形,适应各大兼容性. 下面咱们在网上找两张宽高不一样的照片: No.1 ...
【PDFBox】PDFBox操作PDF文档之添加本地图片、添加网络图片、图片宽高自适应、图片水平垂直居中对齐
这篇文章,主要介绍PDFBox操作PDF文档之添加本地图片.添加网络图片.图片宽高自适应.图片水平垂直居中对齐. 目录一.PDFBox操作图片 1.1.添加本地图片 (1)案例代码 (2)运行效果 ...
vue移动端通过px动态计算图片宽高_vue图片宽高自适应_移动web图片高度自适应的解决方案...
由于图片的加载是在dom加载完成之后进行的,于是,在手机端浏览网页时,经常会看到页面刚打开时很多内容叠在一起,当图片加载完成后,页面会由于图片加载完成出现明显的抖动针对这个问题,有以下几种解决方案 ...
vue 图片宽高自适应
一.概述现有一个图片预览功能,目前设置的宽高都是100%.但是这样有一个问题,如果图片的高度太高,图片展示不全. 二.解决 vue图片在设置好的div里面自动适应宽高,图片显示全部,不够宽高的留空白 ...
css图片宽高自适应盒子（宽＞高就限制宽，高＞宽就限制高）
效果图: 宽>高就限制宽即宽度100% ,高度自动.例如:19201088 高>宽就限制高即高度100%,宽度自动.例如:19442592 很多时候图片宽高比不固定,而且作为一个前端, ...
vue图片宽高自适应_div或img图片高度随宽度自适应的方法
该方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动. 一.可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了). 利用j ...
vue图片宽高自适应_Echarts图标宽度变成100px，让图表宽度随着父元素自动适应，Vue实时监听宽度的变化，这可能是史上最好的解决方案！...
源码解读:当Echarts绘制图表计算宽度的时候,由于初始化图表设置为display: none,所以无法获取到clientWidth,而 parseInt(stl.width, 10)) 将widt ...
微信小程序 - image 宽高自适应(图片无法自适应撑开标签)
微信小程序中的 image 标签跟 html 中的 img 标签还是有些差别的. image 标签有 src.mode 等属性基本够用但是今天在用的时候发现设置 src 之后,image 在小程序中 ...
图片适应窗口_HTMLCSS学习笔记（八）-- 宽高自适应
宽高自适应网页布局中经常要定义元素的宽和高.但很多时候我们希望元素的大小能够根据窗口或子元素自动调整,这就是pc自适应. 自适应的优点: 元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以 ...

背景图片宽高自适应实现

背景图片宽高自适应实现相关推荐

最新文章

热门文章