提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 如安在css上让图片居中、图片顺应【css教程】,css,图片

挪动端基本上都是需要做图片顺应处置惩罚的,比方轮播图,商品封面图等等;用户宣布的图片都不是尺寸规格的图。那末在做挪动开辟的小伙伴是不是碰到图片顺应的难题呢?通知人人,实在css有一个object-fit属性,能够很轻易我们来调解图片,本文是小编整顿的在css上调解图片的要领。

那末有什么方法处置惩罚呢?恰好css3有了object-fit属性

下面来讲一下各个属性值

1.object-fit: cover;

这个属性值在挪动端是用得最多的一个。下面看例子

<img src="https://xxiaoyuan.top/static/js/upload/wz/152826027010892.jpg" alt="">

//css部份
img{
    border: 2px red solid;
	width: 300px;    
	height: 300px;
    object-fit: cover;
}

cover是居中添补全部内容,其中有一边是肯定会恰好添补完全的,盈余的将会裁剪掉(这里的添补是肯定是会填满全部内容的)

效果图 原图尺寸比例

2.object-fit: fill;

fill是添补全部内容,然则不会超越内容,当有一边添补完以后,假如另有空白处将会拉升使全部内容填满

效果图 原图看上面

3.object-fit: contain;

contain添补的时刻一样不会超越内容,当一边添补完以后,添补完毕,并不会拉升转变图片比例,如许当图片不够添补全部内容的时刻,肯定会有一边留白。

效果图 原图看上面

4.object-fit: scale-down;

scalc-down觉得跟contain一样,没看出有什么差别,假如有兄die晓得迎接交换

5.object-fit: none;

none就是默许属性值,什么添补都不给

总结:兼容性的话基本上的手机浏览器都能兼容,除非那些比你都上了年岁的手机。假如上面的内容不是很明白的话,能够比作一张图在你设定的宽高比内容中心由很小很小逐步等比例放大(添补)。假如照样不能明白多是我言语构造的不够好。那就去看官方文档

【引荐课程:css视频课程】

以上就是如安在css上让图片居中、图片顺应的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"如安在css上让图片居中、图片顺应【css教程】,css,图片"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线