HTML如何让IMG自动适应DIV容器大小的实现方法


Posted in HTML / CSS onFebruary 25, 2020

为了让IMG自适应大小,如下我做了一个横向自适应的示例:

  • IMG样式(横向拉伸,纵向自动匹配大小)
     
  • DIV样式(元素居中显示)

IMG样式

(横向拉伸,纵向自动匹配大小)

width:100%;
 height:auto;

(纵向拉伸,横向自动匹配大小)

width:auto;
 height:100%;

DIV样式(元素居中显示)

display:flex;
 align-items:center; 
 justify-content:center;

做法很简单,只要设置对应图片的width和htight的具体数值就可以了。看下面的例子:

img{
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
}

这样设置图片的话,可以使图片在指定的空间内缩放。4行的意思是:

  • width:auto;图片的宽度自己适应(图片有多宽就显示多宽)
  • height:auto;图片的高度自己适应(图片有多高就显示多高)
  • width:auto;和height:auto;一起使用就代表着显示图片的原始尺寸(可以理解为没有什么作用)
  • max-width:100%;图片的宽度不能超过图片所在的空间的宽度
  • max-height:100%;图片的高度不能超过图片所在的空间的高度
  • max-width:100%;max-height:100%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。

示例代码

如下是两个大小和比例都不同的图片,应用这个方法可以让图片自动填充并居中显示

<html>
<head>
<title>让图片自动适应DIV容器大小</title>
<style>
.ShaShiDi{
width:500px;
height:400px;
display:flex;
align-items:center;
justify-content:center;
   /*为了效果明显,可以将如下边框打开,看一下效果*/
   /* border:1px solid black; */
}

.ShaShiDi img{
 width:100%;
 height:auto;
}

</style>
</head>
<body>
 <div class="ShaShiDi">
  <img src="./1.png"/>
 </div>
 <div class="ShaShiDi">
  <img src="./2.png"/>
 </div>
</body>
</html>

 以上就是HTML如何让IMG自动适应DIV容器大小的实现方法的详细内容,更多关于HTML IMG自动适应DIV的资料请关注三水点靠木其它相关文章!

HTML / CSS 相关文章推荐
CSS3教程(9):设置RGB颜色
Apr 02 HTML / CSS
CSS3中Color的一些特性介绍
May 27 HTML / CSS
通过CSS3的object-fit来调整图片适配尺寸的技巧简介
Feb 27 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
html5 touch事件实现页面上下滑动效果【附代码】
Mar 10 HTML / CSS
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
Feb 13 HTML / CSS
iphoneX 适配客户端H5页面的方法教程
Dec 08 HTML / CSS
详解html5页面 rem 布局适配方法
Jan 12 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
Html5页面播放M4a音频文件
Mar 30 HTML / CSS
使用canvas仿Echarts实现金字塔图的实例代码
Nov 11 HTML / CSS
CSS三大特性继承性、层叠性和优先级详解
Jan 18 HTML / CSS
HTML实现代码雨源码及效果示例
Feb 25 #HTML / CSS
使用placeholder属性设置input文本框的提示信息
Feb 19 #HTML / CSS
html5实现滑块功能之type=&quot;range&quot;属性
Feb 18 #HTML / CSS
记一次高分屏下canvas模糊问题
Feb 17 #HTML / CSS
使用canvas压缩图片上传的方法示例
Feb 07 #HTML / CSS
div或img图片高度随宽度自适应的方法
Feb 06 #HTML / CSS
HTML5 实现图片上传预处理功能
Feb 06 #HTML / CSS
You might like
异步加载技术实现当滚动条到最底部的瀑布流效果
2014/09/16 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP实现字符串翻转功能的方法【递归与循环算法】
2017/11/03 PHP
jquery each()源代码
2011/02/14 Javascript
dojo学习第二天 ajax异步请求之绑定列表
2011/08/29 Javascript
基于JavaScript实现TAB标签效果
2016/01/12 Javascript
AngularJS基础 ng-model 指令详解及示例代码
2016/08/02 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
AngularJS路由切换实现方法分析
2017/03/17 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
3种vue路由传参的基本模式
2018/02/22 Javascript
对layui中表单元素的使用详解
2018/08/15 Javascript
vue src动态加载请求获取图片的方法
2018/10/17 Javascript
vue  directive定义全局和局部指令及指令简写
2018/11/20 Javascript
Vue.js实现的购物车功能详解
2019/01/27 Javascript
使用webpack4编译并压缩ES6代码的方法示例
2019/04/24 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
pandas 两列时间相减换算为秒的方法
2018/04/20 Python
python安装模块如何通过setup.py安装(超简单)
2018/05/05 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
使用Python制作自动推送微信消息提醒的备忘录功能
2018/09/06 Python
用python一行代码得到数组中某个元素的个数方法
2019/01/28 Python
Python GUI学习之登录系统界面篇
2019/08/21 Python
Python使用itchat模块实现简单的微信控制电脑功能示例
2019/08/26 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
联想香港官方网站及网店:Lenovo香港
2018/04/13 全球购物
漫威玩具服装及周边商品官方购物网站:Marvel Shop
2019/05/11 全球购物
药品质量检测应届生求职信
2013/11/14 职场文书
业务副厂长岗位职责
2014/01/03 职场文书
融资租赁计划书
2014/04/29 职场文书
人事行政主管岗位职责
2015/04/09 职场文书
《跨越海峡的生命桥》教学反思
2016/02/18 职场文书
企业管理不到位检讨书
2019/06/27 职场文书