h5小游戏在哪里制造_HTML如何让IMG自动适应DIV容器

HTML如何让IMG自动适应DIV容器大小的实现方法   发布     这篇文章主要介绍了HTML如何让IMG自动适应DIV容器大小的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
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 >

 以上就是HTML如何让IMG自动适应DIV容器大小的实现方法的详细内容,更多关于HTML IMG自动适应DIV的资料请关注凡科其它

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://plgtpjsy.cn/ziyuan/2839.html