400 028 6601

建站动态

根据您的个性需求进行定制 先人一步 抢占小程序红利时代

HTML怎么让IMG自动适应DIV容器大小

小编给大家分享一下HTML怎么让IMG自动适应DIV容器大小,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!

网站制作、建网站找专业网站建设公司创新互联建站:定制网站、模板网站、仿站、重庆小程序开发公司、软件开发、重庆APP开发公司等。做网站价格咨询创新互联建站:服务完善、10余年建站、值得信赖!网站制作电话:18980820575

html是什么

html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体,html文本是由html命令组成的描述性文本,html命令可以说明文字,图形、动画、声音、表格、链接等,主要和css+js配合使用并构建优雅的前端网页。

为了让IMG自适应大小,如下我做了一个横向自适应的示例:

IMG样式

(横向拉伸,纵向自动匹配大小)

 width:100%;
 height:auto;

(纵向拉伸,横向自动匹配大小)

 width:auto;
 height:100%;

DIV样式(元素居中显示)

 display:flex;
 align-items:center; 
 justify-content:center;

做法很简单,只要设置对应图片的width和htight的具体数值就可以了。看下面的例子:

img{
 width:auto;
 height:auto;
 max-width:100%;
 max-height:100%;
}

这样设置图片的话,可以使图片在指定的空间内缩放。4行的意思是:

示例代码

如下是两个大小和比例都不同的图片,应用这个方法可以让图片自动填充并居中显示



让图片自动适应DIV容器大小



 
  
 
      

看完了这篇文章,相信你对“HTML怎么让IMG自动适应DIV容器大小”有了一定的了解,如果想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


当前名称:HTML怎么让IMG自动适应DIV容器大小
分享网址:http://mbwzsj.com/article/igdeij.html

其他资讯

让你的专属顾问为你服务