如何让img自动适应div容器大小
IMG样式
（横向拉伸，纵向自动匹配大小）
width:100%;
height:auto;
（纵向拉伸，横向自动匹配大小）
width:auto;
height:100%;DIV样式（元素居中显示）
display:flex;
align-items:center;
justify-content:center;
示例代码
如下是两个大小和比例都不同的图片，应用这个方法可以让图片自动填充并居中显示
<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>
如何让img自动适应div容器大小的更多相关文章
- HTML如何让IMG自动适应DIV容器大小
版权声明:本文为博主原创文章,未经博主允许不得转载.作者:沙师弟专栏 https://blog.csdn.net/u014597198/article/details/80403946HTML如何让I ...
- 关于div容器在ie6下默认高度不为0（存在默认高度）
最近做项目的时候遇到一个问题,相信很多人都遇到过,就是在测试兼容性的时候,在ie6下小于12px 的背景的高度不等于原高,或许这样说你可能不是很明白,那就举个例子吧! 如图所示: 锯齿状的背景图本来是 ...
- highcharts 获取不到隐藏容器大小
1.固定图表大小 2.图表容器div的resize(绑定一个始终显示的,可以影响所有图表的) 影响容器大小改变的: 窗口大小改变 侧边栏切换 滚动条切换
- css文件 如何使背景图片大小适应div的大小
对背景图片设置属性:background-size:cover;可以实现背景图片适应div的大小. background-size有3个属性: auto:当使用该属性的时候,背景图片将保持100% 的 ...
- 根据html容器大小和显示文字多少调节字体大小
在做html相关的东西的时候经常会遇到这样的问题,容器大小(长x宽)固定,容器包含内容(特指文字)多少不固定,这个时候就让人很苦恼了,将字体大小设置成多少才合适呢?下面看看我的解决思路: 首先要知道网 ...
- 拖拽改变div的大小
拖拽改变div的大小 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...
- 转载网页博客：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设置了宽度,效果是相当糟糕,左对齐,右端长短不一,有的超出长度,有的不够长 ...
随机推荐
- Buffer的创建及使用源码分析——ByteBuffer为例
目录 Buffer概述 Buffer的创建 Buffer的使用 总结 参考资料 Buffer概述 注:全文以ByteBuffer类为例说明 在Java中提供了7种类型的Buffer,每一种类型的Buf ...
- BZOJ 2200 道路与航线（图论）
BZOJ 2200 道路与航线 题目大意 有两种路,一种没负数,一种没环,求单源最短路. solution 存在负边权Dij一定不能用嘛,显然不是 根据题意能看出来是tarjan,将双向边缩点,得到的 ...
- POJ3263 Tallest Cow 差分
题目描述 FJ's N (1 ≤ N ≤ 10,000) cows conveniently indexed 1..N are standing in a line. Each cow has a p ...
- 逃学的小孩,树形dp
先找到题 题意: 中文题,没什么好解释的,也没什么歧义. 分析: 首先我们想一下他的路径将会是怎样的:A-B-C/A-C-B,其实就是求一下min(AB+BC,AC+BC),ABC任选.挺简单,首先证 ...
- 从零开始学Electron笔记（三）
在之前的文章我们介绍了一下Electron的菜单创建和事件绑定,其中提到了一个remote模块,接下来我们继续说一下Electron的这个remote模块. 官方关于remote模块的地址:https ...
- python 迭代器（二）：迭代器基础（二）可迭代的对象与迭代器的对比
可迭代的对象 如果对象实现了能返回迭代器的 __iter__ 方法,那么对象就是可迭代的. 序列都可以迭代:实现了 __getitem__ 方法,而且其参数是从零开始的索引,这种对象也可以迭代. &g ...
- Porter 进入 CNCF 云原生全景图，新版本即将发布！
近日,KubeSphere 社区子项目面向物理机环境的负载均衡器 Porter 正式进入 CNCF Landscape.CNCF Landscape 在云原生实践过程中的每个环节帮助用户了解有哪些具体 ...
- noi-vim配置
colorscheme ron set t_Co=256 set mouse=a set ts=4 set sw=4 set nu set ru set ai set ci set cin set l ...
- 数据结构 | 30行代码，手把手带你实现Trie树
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是算法和数据结构专题的第28篇文章,我们一起来聊聊一个经典的字符串处理数据结构--Trie. 在之前的4篇文章当中我们介绍了关于博弈论的 ...
- Python的telnetlib模块使用
telnetlib模块的常用接口 telnetlib.Telnet(host, port, timeout) # 登录 write() # 输入命令 read_until(match) # 读出响应, ...