div或img图片高度随宽度自适应的方法


Posted in HTML / CSS onFebruary 06, 2020

该方法主要用来做网站自适应的,同时可以实现撑起内容高度,避免图片加载后导致的页面滚动。

一、可以使用js判断图片的宽度得到具体数值之后,再来利用js设置图片的高度(这里就不具体为大家细说了)。

利用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;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3绘制百度的小度熊
Oct 29 HTML / CSS
css3强大的动画效果animate使用说明及浏览器兼容介绍
Jan 09 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
CSS3实现苹果手机解锁的字体闪亮效果示例
Jan 05 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
HTML5通过调用canvas对象的getContext()方法来获取绘图环境
Jun 23 HTML / CSS
基于HTML5新特性Mutation Observer实现编辑器的撤销和回退操作
Jan 11 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
HTML5 播放 RTSP 视频的实例代码
Jul 29 HTML / CSS
Canvas实现放大镜效果完整案例分析(附代码)
Nov 26 HTML / CSS
css3应用示例:新增的选择器
Mar 16 HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 #HTML / CSS
微信小程序canvas实现水平、垂直居中效果
Feb 05 #HTML / CSS
Html5定位终极解决方案
Feb 05 #HTML / CSS
canvas简单连线动画的实现代码
Feb 04 #HTML / CSS
html5手机键盘弹出收起的处理
Jan 20 #HTML / CSS
canvas实现烟花的示例代码
Jan 16 #HTML / CSS
使用iframe+postMessage实现页面跨域通信的示例代码
Jan 14 #HTML / CSS
You might like
将PHP作为Shell脚本语言使用
2006/10/09 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
关于PHP开发的9条建议
2015/07/27 PHP
PHP调用接口API封装的例子
2019/10/11 PHP
jquery判断checkbox(复选框)是否被选中的代码
2010/10/20 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
2012/08/14 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
2013/03/18 Javascript
Js获取数组最大和最小值示例代码
2013/10/29 Javascript
ie8下修改input的type属性报错的解决方法
2014/09/16 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
2016/07/24 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
nodejs密码加密中生成随机数的实例代码
2017/07/17 NodeJs
JS验证码实现代码
2017/09/14 Javascript
JavaScript实现修改伪类样式
2017/11/27 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
微信小程序wxml列表渲染原理解析
2019/11/27 Javascript
WebPack工具运行原理及入门教程
2020/12/02 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
python简单文本处理的方法
2015/07/10 Python
简单实现python爬虫功能
2015/12/31 Python
python实现最长公共子序列
2018/05/22 Python
Python实现密钥密码(加解密)实例详解
2020/04/26 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
《陋室铭》教学反思
2014/02/26 职场文书
文明市民先进事迹
2014/05/15 职场文书
防灾减灾活动总结
2014/08/30 职场文书
表扬信范文
2015/05/04 职场文书
2015年统战工作总结
2015/05/19 职场文书
感谢师恩主题班会
2015/08/17 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
五年级作文之成长
2019/09/16 职场文书