html如何设置图片高度和宽度(HTML如何让IMG自动适应DIV容器大小的实现方法)
类别:Web前端 浏览量:2997
时间:2021-10-11 00:05:15 html如何设置图片高度和宽度
HTML如何让IMG自动适应DIV容器大小的实现方法为了让IMG自适应大小,如下我做了一个横向自适应的示例:
- IMG样式(横向拉伸,纵向自动匹配大小)
- li样式(元素居中显示)
IMG样式
(横向拉伸,纵向自动匹配大小)
width:100%; height:auto;
(纵向拉伸,横向自动匹配大小)
width:auto; height:100%;
li样式(元素居中显示)
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>让图片自动适应li容器大小</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> <li class="ShaShiDi"> <img src="./1.png"/> </li> <li class="ShaShiDi"> <img src="./2.png"/> </li> </body> </html>
以上就是HTML如何让IMG自动适应li容器大小的实现方法的详细内容,更多关于HTML IMG自动适应li的资料请关注开心学习网其它相关文章!
热门推荐
- apache的安装步骤(windows安装apache系统中无apache2服务解决方案)
- react初学难点(使用react的7个避坑案例小结)
- SQL Server数据库备份的几个建议
- 制作css3动画应使用哪个样式属性(CSS3中Transform动画属性用法详解)
- web服务器主要有哪些(浅谈Web服务器和应用服务器的区别)
- linux如何安装php7.1.5环境(vmware linux系统安装最新的php7图解)
- ddos防御实例(浅析云主机防ddos的基础防御)
- SQL Server中查看未释放的游标
- php函数使用教程讲解(php函数式编程简单示例)
- sqlserver 锁表原因(SQL Server学习笔记之事务、锁定、阻塞、死锁用法详解)