HTML如何让IMG自动适应DIV容器大小
版权声明：本文为博主原创文章，未经博主允许不得转载。作者：沙师弟专栏 https://blog.csdn.net/u014597198/article/details/80403946
HTML如何让IMG自动适应DIV容器大小
为了让IMG自适应大小，如下我做了一个横向自适应的示例：
IMG样式（横向拉伸，纵向自动匹配大小）
DIV样式（元素居中显示）
IMG样式（横向拉伸，纵向自动匹配大小）
width:100%;
height:auto;
1
2
DIV样式（元素居中显示）
display:flex;
align-items:center;
justify-content:center;
1
2
3
示例代码如下：
如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
---------------------
作者：沙振宇
来源：CSDN
原文：https://blog.csdn.net/u014597198/article/details/80403946?utm_source=copy
版权声明：本文为博主原创文章，转载请附上博文链接！
HTML如何让IMG自动适应DIV容器大小的更多相关文章
- 如何让img自动适应div容器大小
IMG样式 (横向拉伸,纵向自动匹配大小) width:100%; height:auto; (纵向拉伸,横向自动匹配大小) width:auto; height:100%; DIV样式(元素居中显示 ...
- 转载网页博客：ie7bug:div容器下的img与div存在间隙
1.代码及在浏览器上的显示 ie7: ie8+: Firefox: Chrome: 可以看出ie7上在div容器下添加img,div与img中有间隙,而在ie8+和其他浏览器上均显示正常 网页源代码如 ...
- td内容自动换行 ,td超过宽度显示点点点… , td 使用 overflow:hidden 无效，英文 数字 不换行 撑破div容器
我们可以先给表格 table上 固定一个宽度 不让表格撑破 width: 747px; table-layout:fixed; 然后我们在td上加上如下样式 style="width:100 ...
- div容器内文本对齐--神奇的css
有时候使用一些css往往能达到意想不到的效果 最近需要在页面上显示读取的文本内容,中英文混杂着,我把它们统统抛到div中div设置了宽度,效果是相当糟糕,左对齐,右端长短不一,有的超出长度,有的不够长 ...
- 关于div容器在ie6下默认高度不为0（存在默认高度）
最近做项目的时候遇到一个问题,相信很多人都遇到过,就是在测试兼容性的时候,在ie6下小于12px 的背景的高度不等于原高,或许这样说你可能不是很明白,那就举个例子吧! 如图所示: 锯齿状的背景图本来是 ...
- jQuery生成一个DIV容器，ID是"rating".
我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数.看一下rate.php代码.虽然这些例子也可以不使用AJAX来实现,但显示我们不会那么做 ...
- 5种样式实现div容器中三图摆放实例对比说明
代码地址如下:http://www.demodashi.com/demo/11593.html 效果演示: demo点查看效果 需求说明: 如下图所示为设计图,希望在图片上传无规则无规律的情况下实现设 ...
- highcharts 获取不到隐藏容器大小
1.固定图表大小 2.图表容器div的resize(绑定一个始终显示的,可以影响所有图表的) 影响容器大小改变的: 窗口大小改变 侧边栏切换 滚动条切换
- css文件 如何使背景图片大小适应div的大小
对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小. background-size有3个属性: auto:当使用该属性的时候,背景图片将保持100% 的 ...
随机推荐
- Python随笔-函数
在Python中,定义一个函数要使用def语句,依次写出函数名.括号.括号中的参数和冒号:,然后,在缩进块中编写函数体,函数的返回值用return语句返回. def GetMax(v1, v2):#注 ...
- OFDM同步算法之Park算法
park算法代码 训练序列结构 T=[\(C\) \(D\) \(C^{*}\) \(D^{*}\)],其中C表示由长度为N/4的复伪随机序列PN,ifft变换得到的符号序列 \(C(n) = D(N ...
- Laravel 5.4.36 session 发现
由于Laravel session机制完全脱离了PHP自带的session机制 因此对于php.ini 配置session对Laravel 是不会产生影响 代码路径: vendor/larav ...
- 软件架构自学笔记----分享“去哪儿 Hadoop 集群 Federation 数据拷贝优化”
去哪儿 Hadoop 集群 Federation 数据拷贝优化 背景 去哪儿 Hadoop 集群随着去哪儿网的发展一直在优化改进,基本保证了业务数据存储量和计算量爆发式增长下的存储服务质量.然而,随着 ...
- [转]STL之deque容器详解
Deque 容器 deque容器是C++标准模版库(STL,Standard Template Library)中的部分内容.deque容器类与vector类似,支持随机访问和快速插入删除,它在容器中 ...
- python 字典 get方法
在做项目的过程中,遇到了一个问题,数据保存到字典中,后来发现数据不对,排查了字典的构建过程,是OK的,后来怀疑是别的部分共用了这一个字典,排查代码,发现这里应该是有问题的. score = None ...
- C3P0数据库连接池使用方法
一.应用程序直接获取数据库连接的缺点 用户每次请求都需要向数据库获得链接,而数据库创建连接通常需要消耗相对较大的资源,创建时间也较长.假设网站一天10万访问量,数据库服务器就需要创建10万次连接,极大 ...
- SqlServer IsNull 与 NullIf
ISNULL(check_expression, replacement_value) check_expression 与 replacement_value 数据类型必须一致,如果 check_e ...
- 推荐系统相关比赛-kaggle
from: 七月在线 电商推荐与销量预测相关案例 一.预测用户对哪个事件感兴趣(感兴趣不一定去参加) 用户历史参加事件.社交信息.浏览信息(app).要预测的事件 recall:召回率 准确率: 协同 ...
- linux - 运维软件saltstack
目录 运维软件saltstack 安装使用流程 运维软件saltstack 早期运维人员会根据自己的生产环境来写特定脚本完成大量重复性工作,这些脚本复杂且难以维护.系统管理员面临的问题主要是1.系统配 ...