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% 的 ...
随机推荐
- MyBatis 配置控制台上显示sql语句（log4j.properties 之三）
### direct log messages to stdout ###log4j.appender.stdout=org.apache.log4j.ConsoleAppenderlog4j.app ...
- drupal 8——打补丁（patch）
druapl 的核心可能会有漏洞,这时就需要我们去打补丁.很多补丁都已经有人写好了,我这里讲的就是如何去打这些已经写好的补丁. 对于这个问题:drupal8 核心有bug导致了两个相同的错误提示的出现 ...
- Win32编程笔记
我都决定了目前不再接触这些个浪费精力的API了,结果为了DirectX编程我特么又回来了.....微软你的东西真是坑人 以前用这玩意的时候需要什么就查,查完就忘了,这次记一记,以后再用也不至于忘的太离 ...
- 显示log里的ansi codecs颜色字符
方法: vim AnsiEsc插件 http://www.vim.org/scripts/script.php?script_id=302 less -r cat和tail命令都可以正常显示,而且ta ...
- String s="a"+"b"+"c"+"d";创建了几个对象?
对于如下代码: package reviewTest; /** * @ClassName: StringTest * @Description: 测试String的字符串相加优化 * @author ...
- C语言考试
1.如何定义一个占用空间为0的变量 2.c++如何在指定内存区域创建对象 3.gcc动态库如何调用宿主执行文件的函数,阐述动态链接库的两种加载方式 4.static有什么用处 5.阐述do{...}w ...
- [Usaco2014 Mar]Sabotage
[Usaco2014 Mar]Sabotage 题目 Farmer John"s arch-nemesis, Farmer Paul, has decided to sabotage Far ...
- 对SHH的公钥和私钥的简单理解
SSH是在应用层和传输层基础上的安全协议 SSH提供了两种级别的安全验证: 第一基于密码的安全验证:账号.密码,但可能有别的服务器冒充真正的服务器,无法避免被“中间人”攻击(man-in-the-mi ...
- Sencha Touch 2.1学习图表Chart概述
Extjs.chart提供了可视化展现数据的能力,每个图表可以绑定到数据模型Ext.data.Store上, 并随着数据的变换可以自动的更新图表 一个图表对象包括图标风格.坐标(axes).序列(se ...
- 并行输入\输出控制器之我见（PIO）
中断信号FIQ及IRQ0到IRQn一般通过PIO控制器复用.但是,由于PIO控制器对于输入无效且中断线(FIQ或IRQ)仅作为输入,因此不必为中断分配I/0线. 电源管理控制器控制P ...