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 相关文章推荐
浅析两列自适应布局的3种思路
May 03 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
CSS3中的常用选择器使用示例整理
Jun 13 HTML / CSS
详解background属性的8个属性值(面试题)
Nov 02 HTML / CSS
详解Html5原生拖拽操作
Jan 12 HTML / CSS
详解HTML5中的manifest缓存使用
Sep 09 HTML / CSS
如何用H5实现一个触屏版的轮播器的实例
Jan 09 HTML / CSS
HTML5 3D书本翻页动画的实现示例
Aug 28 HTML / CSS
HTML5超文本标记语言的实现方法
Sep 24 HTML / CSS
css filter和getUserMedia的联合使用
Feb 24 HTML / CSS
使用CSS实现音波加载效果
May 07 HTML / CSS
HTML5中的DOCUMENT.VISIBILITYSTATE属性详解
May 07 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
基于Snoopy的PHP近似完美获取网站编码的代码
2011/10/23 PHP
php实现带读写分离功能的MySQL类完整实例
2016/07/28 PHP
CI框架实现优化文件上传及多文件上传的方法
2017/01/04 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
JavaScript修改css样式style
2008/04/15 Javascript
学习ExtJS fit布局使用说明
2009/10/08 Javascript
javascript void(0)的妙用
2009/10/21 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
jqTransform form表单美化插件使用方法
2012/07/05 Javascript
jQuery实现密保互斥问题解决方案
2013/08/16 Javascript
解析JavaScript中instanceof对于不同的构造器或许都返回true
2013/12/03 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
JS截取与分割字符串常用技巧总结
2015/11/10 Javascript
简要了解jQuery移动web开发的响应式布局设计
2015/12/04 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
Bootstrap源码解读导航条(7)
2016/12/23 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
2017/12/26 Javascript
Vue中的混入的使用(vue mixins)
2018/06/01 Javascript
详解组件库的webpack构建速度优化
2018/06/18 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
[54:27]TNC vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python提示[Errno 32]Broken pipe导致线程crash错误解决方法
2014/11/19 Python
python实现上传下载文件功能
2020/11/19 Python
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
通过python 执行 nohup 不生效的解决
2020/04/16 Python
Python如何对齐字符串
2020/07/30 Python
德国足球商店:OUTFITTER
2019/05/06 全球购物
思想汇报格式
2014/01/05 职场文书
纪念9.18事变演讲稿
2014/09/14 职场文书
西安导游词
2015/02/12 职场文书
网络研修心得体会
2016/01/08 职场文书
Apache POI的基本使用详解
2021/11/07 Servers
TV动画《史上最强大魔王转生为村民A》番宣CM公布
2022/04/01 日漫