CSS-有关于图片的问题

一般在实际项目中,图片大多数情况下都是由<img>标签插入进去的,这样的好处就是方便后期的维护以及在进行前后端对接时提供方便。可这就带来了一个问题,那就是由<img>标签插进去的图片并不会像设置背景图片那样方便。在这里我给大家提供一个解决方案。


1、首先给需要插入图片的div设置一个类名,可以是img-box、imgs等等,在这里我推荐使用img-box。

2、在style中设置 .img-box img{max-width:100%;min-height:100%;font-size:0;display:block; }

3、另外设置一个类名,专门用来设置图片的大小。


这样设置之后,不管后台传多大的图片进来都不会出现溢出的部分,怎么样,是不是很神奇呢。

还有就是有关于背景图片的问题。当给一个div设置过背景图片后,如果还想要让它background-size:100%;时一定要注意它的先后顺序。比如,在设置过background后,background-size必须放在background的后面,否则将无法渲染。这与浏览器渲染代码的先后顺序有关。(已在VsCode中得到证实)


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章