div或img图片高度随宽度自适应
2017-04-08 11:39
232 查看
一、可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了)。
利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度,不能随着浏览器的窗口大小变化来实现自适应。
二、我这次主要是用css来实现图片高度的自适应问题。
下面是所需要的代码
(这种方法是可以在图片上方垂直居中展示文字的,如果不需要可以选择最下方更简洁的代码)
<div class="box">
<span>行内元素垂直居中</span>
<div class="img-box"> <img src="123.jpg"/> </div>
</div>
1、这里主要为大家说明的就是padding-bottom这个属性,当它的值为百分比的时候,是按该元素的宽度来计算的。所以当设为100%的时候,其高度就等于自身的宽度,形成一个正方形。当然,这个数值可以根据实际情再进行调整。
2、其次要说明的就是我们引用的图片是通过绝对定位来布局的,这样才能使图片跟随其父元素的大小改变来实现自适应。
另一种简洁的方法就是直接在img的父元素上加padding-bottom就行了
利用js来实现有一个缺点就是只能在页面刷新的时候才能调整图片的高度,不能随着浏览器的窗口大小变化来实现自适应。
二、我这次主要是用css来实现图片高度的自适应问题。
下面是所需要的代码
(这种方法是可以在图片上方垂直居中展示文字的,如果不需要可以选择最下方更简洁的代码)
<div class="box">
<span>行内元素垂直居中</span>
<div class="img-box"> <img src="123.jpg"/> </div>
</div>
.box{ width: 50%; margin: 50px auto; } .img-box{ width: 100%; position:relative; z-index:1; } .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; }
相关文章推荐
- jquery实现div自适应浏览器高度(宽度)
- css+div+图片实现宽度自适应圆角框
- div 里边只包含一个img, 结果div的高度比img图片的高度多3px
- Android 自定义imageview图片高度固定大小宽度按比例自适应
- css样式实现左边的固定宽度和高度的图片或者div跟随右边高度不固定的文字或者div垂直居中(文字高度超过图片,图片跟随文字居中,反之文字跟随图片居中非table实现)
- 解决IE和FF下改变img的src后,获取图片高度和宽度问题
- 图片在已固定宽度的DIV及TABLE中自适应
- 为什么一个img在一个div里下方有多余的空间-怎么让div自适应图片的高度
- div不能自适应高度不能随图片的高度变化
- iOS Label自适应高度/宽度 , 图片自适应
- 网页背景图片固定切自适应浏览器高度宽度
- PHP获取图片宽度高度、大小尺寸、图片类型、用于布局的img属性
- Img图片超过了DIV的最大宽度 解决方案
- WordPress 去除图片img标签的高度与宽度
- DIV背景图片随DIV高度宽度变化而自动拉伸
- css+div+图片实现高度自适应圆角框
- 设置div 自适应高度和宽度
- 窗口打开时div内容自适应窗口高度和宽度
- html css div自适应屏幕宽度,高度
- 空div中设置背景图片(不设置div高度和宽度)