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实现无限循环的无缝滚动的示例代码
Nov 01 HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 HTML / CSS
CSS3 实现倒计时效果
Nov 25 HTML / CSS
js实现移动端H5页面手指滑动刻度尺功能
Nov 16 HTML / CSS
Html5 Canvas 实现一个“刮刮乐”游戏
Sep 05 HTML / CSS
HTML5 canvas 基本语法
Aug 26 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 HTML / CSS
html5使用canvas画空心圆与实心圆
Dec 15 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
May 11 HTML / CSS
HTML5 body设置自适应全屏
May 07 HTML / CSS
CSS3 实现NES游戏机的示例代码
Apr 21 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
用 Composer构建自己的 PHP 框架之使用 ORM
2014/10/30 PHP
php实现改变图片直接打开为下载的方法
2015/04/14 PHP
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
使用非html5实现js板连连看游戏示例代码
2013/09/22 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
jQuery EasyUI Dialog拖不下来如何解决
2015/09/28 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
理解AngularJs篇:30分钟快速掌握AngularJs
2016/12/23 Javascript
nodejs读写json文件的简单方法(必看)
2017/03/09 NodeJs
jQuery源码解读之extend()与工具方法、实例方法详解
2017/03/30 jQuery
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
Python实现端口复用实例代码
2014/07/03 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
深入理解NumPy简明教程---数组3(组合)
2016/12/17 Python
由浅入深讲解python中的yield与generator
2017/04/05 Python
python实现外卖信息管理系统
2018/01/11 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Python Pandas数据中对时间的操作
2019/07/30 Python
解决Pycharm中恢复被exclude的项目问题(pycharm source root)
2020/02/14 Python
python matlab库简单用法讲解
2020/12/31 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
HTML5 FormData 方法介绍以及实现文件上传示例
2017/09/12 HTML / CSS
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
Ariat英国官网:为世界顶级马术运动员制造最优质的鞋类和服装
2020/02/14 全球购物
空指针到底是什么
2012/08/07 面试题
工厂保洁员岗位职责
2013/12/04 职场文书
品牌服务方案
2014/06/03 职场文书
学校2014重阳节活动策划方案
2014/09/16 职场文书
群众路线个人对照检查材料
2014/09/23 职场文书
婚礼父母答谢词
2015/01/04 职场文书
2015年学校教务处工作总结
2015/05/11 职场文书
新课程改革心得体会
2016/01/22 职场文书