前端自适应图片留白解决

发布时间:2019年09月04日作者:atguigu浏览次数:2,209

大家都知道我们在前端培训学习的时候都接触过img标签,这个是前端开发常用标签,我们在前端培训班学习的时候经常会遇到加背景图片出现显示不全或者是留白的问题,接下来我们就简单分析一下前端培训学习中常遇到的图片问题。

项目中图片引入标签是img,但是想要图片显示在完整的设置好的div盒子容器中,前面我们用背景图可以设置background-size设置,那么img是如何设置的。

web前端培训

一:background-size: contain 与cover的区别:

作用: 都是将图片以相同宽高比缩放以适应整个容器的宽高。

不同之处在于:

在no-repeat情况下,如果容器宽高比与图片宽高比不同,

  cover:图片宽高比不变、铺满整个容器的宽高,而图片多出的部分则会被隐藏。;

  contain:图片自身的宽高比不变,缩放至图片自身能完全显示出来,所以容器会有留白区域;

其实,从英文的意思来说:cover意味着“遮罩、遮盖”—此处理解为“填满”较恰当,contain意为“包含”–也就是:我图片虽然缩放了,但是整个图是被“包含”在你里面的,显示是必须完整的、不能有一点隐藏。

 

在repeat属性的情况下:cover:与上述一样图片填满容器;contain:容器盒子内至少会有一张完整的图片,其他留白的区域则平铺背景图。

 

二:如果是img便签

object-fit: contain; // contain与cover与background-size一样的用法

想要了解跟多关于前端培训课程内容欢迎关注尚硅谷前端培训,尚硅谷除了这些技术文章外还有免费的高质量前端培训课程视频供广大学员下载学习。

 


上一篇:
下一篇:
相关课程

java培训 大数据培训 前端培训 UI/UE设计培训

关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
全国统一咨询电话:010-56253825
地址:北京市昌平区宏福科技园2号楼3层(北京校区)

深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)

武汉市东湖高新开发区东湖网谷(武汉校区)

西安市高新区和发智能大厦(西安校区)