div或img图片高度随宽度自适应
来源:互联网 发布:线切割锥度编程软件 编辑:程序博客网 时间:2024/06/05 05:40
一、可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了)。
利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度,不能随着浏览器的窗口大小变化来实现自适应。
二、我这次主要是用css来实现图片高度的自适应问题。
下面是所需要的代码
<div class="box"><div class="img-box"><img src="123.jpg"/> </div></div>
.box{width: 50%;margin: 50px auto;}.img-box{width: 100%;position:relative;z-index:2;}.img-box img{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;margin:auto;z-index: 1;*zoom:1;}.img-box:before {content: "";display: inline-block;padding-bottom: 100%;width: 0.1px;/*必须要有数值,否则无法把高度撑起来*/vertical-align: middle;}
1、这里主要为大家说明的就是padding-bottom这个属性,当它的值为百分比的时候,是按该元素的宽度来计算的。所以当设为100%的时候,其高度就等于自身的宽度,形成一个正方形。当然,这个数值可以根据实际情再进行调整。
2、其次要说明的就是我们引用的图片是通过绝对定位来布局的,这样才能使图片跟随其父元素的大小改变来实现自适应。
另一种简单的方法就是直接在img的父元素上加padding-bottom就行了
<div class="img-box"><img src="123.jpg"/></div>
.img-box{padding-bottom:100%;}.img-box img{position:absolute;top:0;bottom:0;left:0;right:0;width:100%;margin:auto;}
2 0
- div或img图片高度随宽度自适应
- iOS Label自适应高度/宽度 , 图片自适应
- html css div自适应屏幕宽度,高度
- 设置div 自适应高度和宽度
- html css div自适应屏幕宽度,高度
- div自适应宽度和高度实现
- html css div自适应屏幕宽度,高度
- 限制图片宽度或高度
- 图片宽度填充屏幕,高度自适应
- 为什么一个img在一个div里下方有多余的空间-怎么让div自适应图片的高度
- div嵌套ul时div的宽度和高度自适应
- div或表格高度自适应的问题
- css+div+图片实现宽度自适应圆角框
- css+div+图片实现高度自适应圆角框
- jquery实现div自适应浏览器高度(宽度)
- 窗口打开时div内容自适应窗口高度和宽度
- css实现div高度根据自适应宽度(百分比)调整
- Iframe 自适应高度宽度
- [模板]次小生成树
- Unity Shader-边缘光(RimLight)效果
- Impala之02-原理、架构分析(1)
- 浅谈竞价推广
- java开发之缓存框架--ehcache
- div或img图片高度随宽度自适应
- Hexo d- Permission denied(publickey)
- 内存寻址方式
- 词法分析器
- 代码整洁之道精华——第七章 错误处理
- List集合的具体对象的特点
- V4L2常用命令标志符和结构体
- Laravel 上传文件异常处理
- 域作用符