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实现鼠标悬停提示气泡效果
Feb 28 HTML / CSS
css3实现超立体3D图片侧翻倾斜效果
Apr 16 HTML / CSS
详解CSS3选择器:nth-child和:nth-of-type之间的差异
Sep 18 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
Mar 28 HTML / CSS
详解Html5中video标签那些属性和方法
Jul 01 HTML / CSS
html5 Canvas画图教程(4)—未闭合的路径及渐变色的填充方法
Jan 09 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
Oct 17 HTML / CSS
关于HTML5+ API plusready的兼容问题
Nov 20 HTML / CSS
css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效
Apr 29 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递归算法和应用方法介绍
2013/04/15 PHP
PHP 实现explort() 功能的详解
2013/06/20 PHP
关于使用coreseek并为其做分页的介绍
2013/06/21 PHP
PHP邮件发送类PHPMailer用法实例详解
2014/09/22 PHP
php微信开发之上传临时素材
2016/06/24 PHP
PHP基于MySQLI函数封装的数据库连接工具类【定义与用法】
2017/08/11 PHP
关于php开启错误提示的总结
2019/09/24 PHP
JavaScript 变量命名规则
2009/09/23 Javascript
textarea焦点的用法实现获取焦点清空失去焦点提示效果
2014/05/19 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
浅谈jquery.fn.extend与jquery.extend区别
2015/07/13 Javascript
JS实现横向拉伸动感伸缩菜单效果代码
2015/09/04 Javascript
angular ng-repeat数组中的数组实例
2017/02/18 Javascript
用 js 的 selection range 操作选择区域内容和图片
2017/04/18 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
利用JS实现scroll自定义滚动效果详解
2017/10/17 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
Layui 导航默认展开和菜单栏选中高亮设置的方法
2019/09/04 Javascript
微信小程序实现页面浮动导航
2020/01/08 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
原生JS实现拖拽功能
2020/12/16 Javascript
python连接mongodb密码认证实例
2018/10/16 Python
基于Python-Pycharm实现的猴子摘桃小游戏(源代码)
2021/02/20 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
护士自我评价范文
2014/01/25 职场文书
教师绩效工资方案
2014/02/01 职场文书
电气自动化个人求职信范文
2014/02/03 职场文书
中学生自我鉴定
2014/02/04 职场文书
伦敦奥运会口号
2014/06/13 职场文书
2014年销售员工作总结
2014/12/01 职场文书
党员思想汇报材料
2014/12/19 职场文书
街道党风廉政建设调研报告
2015/01/01 职场文书
悬空寺导游词
2015/02/05 职场文书
杨善洲观后感
2015/06/04 职场文书