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中的border-radius(边框圆角)示例代码
Jul 19 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
非常漂亮的CSS3百叶窗焦点图动画
Feb 24 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
Aug 04 HTML / CSS
HTML5 解析规则分析
Aug 14 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
Nov 27 HTML / CSS
html5 跨文档消息传输示例探讨
Apr 01 HTML / CSS
html5桌面通知(Web Notifications)实例解析
Jul 07 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
HTML5 Canvas中绘制椭圆的4种方法
Apr 24 HTML / CSS
HTML5之tabindex属性全面解析
Jul 07 HTML / CSS
Canvas 帧动画吃苹果小游戏
Aug 05 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处理斐波那契数列非递归方法
2012/02/04 PHP
PHP往XML中添加节点的方法
2015/03/12 PHP
thinkphp多层MVC用法分析
2015/12/30 PHP
Symfony2在Nginx下的配置方法图文教程
2016/02/04 PHP
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
jquery动态加载图片数据练习代码
2011/08/04 Javascript
基于jquery的$.ajax async使用
2011/10/19 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
理解JS事件循环
2016/01/07 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
Vue + Vue-router 同名路由切换数据不更新的方法
2017/11/20 Javascript
vue.js前后端数据交互之提交数据操作详解
2018/04/24 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
2018/09/27 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【凹多边形的分离轴检测算法】
2018/12/13 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
python如何读写json数据
2018/03/21 Python
Python 中list ,set,dict的大规模查找效率对比详解
2019/10/11 Python
wxPython色环电阻计算器
2019/11/18 Python
Numpy之将矩阵拉成向量的实例
2019/11/30 Python
使用keras实现孪生网络中的权值共享教程
2020/06/11 Python
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
美国网上鞋子零售商:Dr. Scholl’s Shoes
2017/11/17 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
交通法规咨询中心工作职责
2013/11/27 职场文书
面试后感谢信怎么写
2014/02/01 职场文书
教研处工作方案
2014/05/26 职场文书
电子信息工程自荐信
2014/05/26 职场文书
店铺转让协议书
2014/12/02 职场文书
顶岗实习协议书
2015/01/29 职场文书
英语教师个人总结
2015/02/09 职场文书
大学生毕业个人总结
2015/02/15 职场文书