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伸缩布局盒模型Flex布局
Aug 20 HTML / CSS
老生常谈CSS中的长度单位
Jun 27 HTML / CSS
HTML5中语义化 b 和 i 标签
Oct 17 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
使用canvas绘制超炫时钟
Dec 17 HTML / CSS
整理HTML5中表单的常用属性及新属性
Feb 19 HTML / CSS
逼真的HTML5树叶飘落动画
Mar 01 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
Canvas系列之滤镜效果
Feb 12 HTML / CSS
HTML5 图片预加载的示例代码
Mar 25 HTML / CSS
使用CSS定位HTML元素的实现方法
Jul 07 HTML / CSS
浅谈为什么我的 z-index 又不生效了
Jul 15 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
ftp类(example.php)
2006/10/09 PHP
PHP易混淆函数的区别及用法汇总
2014/11/22 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
PHP静态成员变量
2017/02/14 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
jquery 插件学习(四)
2012/08/06 Javascript
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
2013/07/17 Javascript
jQuery标签替换函数replaceWith()的使用例子
2014/08/28 Javascript
JS+CSS实现可拖动的弹出提示框
2015/02/16 Javascript
JS+CSS实现的日本门户网站经典选项卡导航效果
2015/09/27 Javascript
使用jQuery UI库开发Web界面的简单入门指引
2016/04/22 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
JavaScript中捕获与冒泡详解及实例
2017/02/03 Javascript
浅谈Node新版本13.2.0正式支持ES Modules特性
2019/11/25 Javascript
微信小程序自定义联系人弹窗
2020/05/26 Javascript
Javascript生成器(Generator)的介绍与使用
2021/01/31 Javascript
Python使用pickle模块实现序列化功能示例
2018/07/13 Python
tensorflow实现图像的裁剪和填充方法
2018/07/27 Python
python flask框架实现传数据到js的方法分析
2019/06/11 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
Python3 全自动更新已安装的模块实现
2020/01/06 Python
python 装饰器功能与用法案例详解
2020/03/06 Python
python爬取2021猫眼票房字体加密实例
2021/02/19 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
经典优秀个人求职自荐信格式
2013/09/25 职场文书
中学生差生评语
2014/01/30 职场文书
出纳工作岗位责任制
2014/02/02 职场文书
幸福家庭事迹材料
2014/02/03 职场文书
体育教师求职信
2014/06/30 职场文书
教师查摆问题自查报告
2014/10/11 职场文书
2014年保管员工作总结
2014/11/18 职场文书
大学军训决心书
2015/02/05 职场文书
2016民族团结先进个人事迹材料
2016/02/26 职场文书
Java多条件判断场景中规则执行器的设计
2021/06/26 Java/Android