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写 空心三角箭头 (两种写法)
Sep 29 HTML / CSS
canvas实现俄罗斯方块的方法示例
Dec 13 HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 HTML / CSS
html5拍照功能实现代码(htm5上传文件)
Dec 11 HTML / CSS
HTML5 Canvas中使用路径描画二阶、三阶贝塞尔曲线
Jan 01 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
一波HTML5 Canvas基础绘图实例代码集合
Feb 28 HTML / CSS
HTML5实现多张图片上传功能
Mar 11 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
解决HTML5中滚动到底部的事件问题
Aug 22 HTML / CSS
CSS中calc(100%-100px)不加空格不生效
May 07 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 常用字符串函数总结
2008/03/15 PHP
PHP 断点续传实例详解
2017/11/11 PHP
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
js实现继承的5种方式
2015/12/01 Javascript
jqueryMobile使用示例分享
2016/01/12 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
JavaScript的设计模式经典之代理模式
2016/02/24 Javascript
vue.js表格组件开发的实例详解
2016/10/12 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
node 标准输入流和输出流代码实例
2019/09/19 Javascript
countUp.js实现数字动态变化效果
2019/10/17 Javascript
js实现简易计算器功能
2019/10/18 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
vue表单验证之禁止input输入框输入空格
2020/12/03 Vue.js
vue el-upload上传文件的示例代码
2020/12/21 Vue.js
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
python 定时修改数据库的示例代码
2018/04/08 Python
Pandas 数据处理,数据清洗详解
2018/07/10 Python
Python操作Sonqube API获取检测结果并打印过程解析
2019/11/27 Python
应届生护士求职信
2013/11/01 职场文书
小学教师国培感言
2014/02/08 职场文书
学校万圣节活动方案
2014/02/13 职场文书
十八届三中全会个人学习材料
2014/02/13 职场文书
幼儿园教师师德师风演讲稿:我自豪我是一名幼师
2014/09/10 职场文书
2014工程部年度工作总结
2014/12/17 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
研究生导师评语
2014/12/31 职场文书
介绍信格式
2015/01/30 职场文书
综合测评自我评价
2015/03/06 职场文书
博士给导师的自荐信
2015/03/06 职场文书
讲座新闻稿
2015/07/18 职场文书
班干部学习委员竞选稿
2015/11/20 职场文书