快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

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

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

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

html是什么

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

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

  • IMG样式(横向拉伸,纵向自动匹配大小)
     

  • DIV样式(元素居中显示)

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行的意思是:

  • width:auto;图片的宽度自己适应(图片有多宽就显示多宽)

  • height:auto;图片的高度自己适应(图片有多高就显示多高)

  • width:auto;和height:auto;一起使用就代表着显示图片的原始尺寸(可以理解为没有什么作用)

  • max-width:100%;图片的宽度不能超过图片所在的空间的宽度

  • max-height:100%;图片的高度不能超过图片所在的空间的高度

  • max-width:100%;max-height:100%;一起使用就代表这图片的宽高尺寸最大不能超过它所在的空间的宽高。

示例代码

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



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



 
  
 
      

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


标题名称:HTML怎么让IMG自动适应DIV容器大小
转载来于:http://6mz.cn/article/igdeij.html

其他资讯