html图片固定高宽比显示,科技常识:CSS背景图片固定宽高比自适应调整的实现方法...
今天小编跟大家讲解下有关CSS背景图片固定宽高比自适应调整的实现方法 ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关CSS背景图片固定宽高比自适应调整的实现方法 的相关资料,希望小伙伴们看了有所帮助。
标签可以使图片在保持宽高比不变的情况下自动调整。我们讨论的是div的背景图片实现固定宽高比自适应调整的方法。这里的图片不是< img>标签一样通过src引入 而是通过css的background-image: url('路径')实现。
实现背景图片固定宽高比缩放我们采用padding-top:(percentage)来实现 padding-top取值百分比是相对于包含块的宽度而定。
因为图片尺寸和屏幕尺寸不匹配等原因 可能会出现背景图片显示不完全等情况 我们先用一个小的div来演示一下。
代码如下 限制一个div的最大宽度为750px 根据图片尺寸设定padding-top: 89% 这个百分比是高度/宽度。
无缩放时如下图
有缩放时的如下
我们可以看出 在浏览器窗口尺寸改变时 图片的宽高比没有改变。
下面我们用网页的背景图片试试。代码
注意代码中的background-size属性 我们给的属性值是cover 是把背景图片放大到适合元素容器的尺寸 图片比例不变 会出现图片显示不全的情况。还有一个经常使用的值是background-size:100% 100% 图片按容器比例撑满 会导致图片变形。
我们运行后得到的结果及缩放后的结果如下所示 虽然图片显示不完全 但是可以看到宽高比是不变的。
padding-top 可以用于背景图片固定宽高比缩放的原因 是背景图片区域包含padding 所以padding不会影响背景图片 如果还要在背景图片上加一些文字等 可能padding-top的方法就不适用了。
在这里提一下另一种方法 我们可以在屏幕变化时 根据屏幕宽度显示不同的背景图片 用css @media实现
具体用法可参考:https:///css/692648.html
总结
以上就是这篇文章的全部内容了 希望本文的内容对大家的学习或者工作具有一定的参考学习价值 谢谢大家对AIDI的支持。
来源:爱蒂网
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时候联系我们修改或删除,多谢。
html图片固定高宽比显示,科技常识:CSS背景图片固定宽高比自适应调整的实现方法...相关推荐
- html背景图片div设置宽自动,CSS背景图片固定宽高比自适应调整的实现方法
标签可以使图片在保持宽高比不变的情况下自动调整.我们讨论的是div的背景图片实现固定宽高比自适应调整的方法.这里的图片不是< img>标签一样通过src引入,而是通过css的backgro ...
- html 文字在背景图片上,如何让文字作为CSS背景图片显示
在实际开发中,有时候希望文字内容可以作为背景图片显示,一方面是希望利用背景图片的优势,例如可以平铺,另外一方面是常见的替换元素不能使用伪元素创建文字,此时只能寄希望与背景图. 关键如何把文字变成背景图 ...
- php图片背景平铺,css如何让背景图片平铺?css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- php如何平铺背景图片,css如何让背景图片平铺?css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- css 背景平铺 控制范围,css如何让背景图片平铺?css背景图片平铺四种方式介绍...
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- css如何让背景图片平铺?css背景图片平铺四种方式介绍-前端教程
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- css如何让背景图片平铺?css背景图片平铺四种方式介绍
在网页设计的过程中,有时候可能会要求背景图片平铺,因为这样会让整个网页看起来比较好看,图片平铺可以不用具体设置body宽度和高度大小,就可以直接将图片平铺整个页面,那么,如何让背景图片平铺呢?接下来本 ...
- 完美的css背景图片全屏显示,能比例缩小,不留空白
简介:完美的css背景图片全屏显示,能比例缩小,不留空白,我们之前已经知道了可调整大小的背景图片的概念.但是读者DougShults发给了我一个链接,其中使用了非常酷的技术,我觉得这种技术要比之前的任 ...
- webpack5.0中打包css背景图片生成重复,不能显示的问题考究
问题:利用webpack5.0以上版本进行背景图片打包,会出现打包图片重复的问题,并且背景图片无法正常显示. 测试过的正常配置如下: webpack.config.js const { resolve ...
最新文章
- 利用jQuery实现用户名片小动画
- 阿里云DDoS高防 - 访问与攻击日志实时分析(二)
- [ lucene FAQ ] 当磁盘索引被IndexSearcher打开时,为什么优化操作后索引容量翻倍?...
- CDS view delivered in CRM EHP4
- C#中Brush、Color、String相互转换
- 什么是工业光纤收发器,工业收发器的作用是什么?
- c函数scanf(),printf()等常用格式字符串
- 嘉益仕(Litns)带您读懂MES系统:选型篇
- 1万吨猪肉只够吃1.5小时,中国人是有多爱猪肉?
- Android Native Hook工具
- java 有限状态机_有限状态机( Finite State Machine )JAVA 版
- 华为服务器怎么装win7系统教程视频教程,华为交换机配置教程|华为交换机配置视频教程完整版...
- R数据分析:方法与案例详解--自学笔记
- 计算机本地无法连接失败怎么办,本地连接连不上,小编教你电脑本地连接连不上怎么解决...
- 修改windows软件图标
- 操作系统学习笔记(五)---进程同步
- Jackson ImmunoResearch通过 SDS-PAGE 进行蛋白质分离
- dp 最佳加法表达式
- 《Computer-CPU中央处理器和GPU图形处理器》
- 深度玄学-实战开发步骤
热门文章
- go语言学习路线图_2019年最新Go语言学习路线图,三个月带你通关Go语言
- STM32 CAN通讯配置
- 转贴 :sql数据库置疑:Sql Server数据库置疑的解决
- 研讨会 | “数据星河”系列活动—大数据人才培养现状和思考
- Git Hooks 使用说明
- 琼版iPhone 12 系列售价来了,4784元起!
- c语言链表中何时用点何时用箭头,C语言指针五——指针应用:链表
- php 位运算符的实际应用(权限判断)
- 您的连接不是私密连接 怎么解决
- 新建的亚马逊云服务器EC2 ping 不通 解决方案