533333巴黎人app-533333巴黎人官网

当前位置:首页 > 新闻中心 > 解决方案
如何在网页设计中使用SVG图片责任编辑 :李飞    文章来源 :533333巴黎人app创想(www.iswweb.com)    发布时间 :2014-07-29    阅读次数:4146

一、首先533333巴黎人官网要说一下为什么要使用SVG图片。

一般在响应式网页设计中,用SVG来代替GIF或者PNG图片,可以获得更好的显示效果,更适合在iPad Retina中显示。它是一种矢量图片,不受分辨率的影响。

二、其次怎么在533333巴黎人官网设计中使用SVG图片

通常在html中插入图片的方法是如下:

插入SVG图片则使用\,如下面的例子,需要注意的是,如果是IE 8浏览器,533333巴黎人官网还是需要fallback原本的GIF或PNG图片。

                                      

另外,如果你原先在CSS文件中设置了让图片自动响应宽度

img { max-width: 100%; }

你使用的SVG图片则无法实现以上的CSS,因为:

  1. SVG本身有宽度和高度的设定,这是你在AI中制作原始矢量文件是的尺寸,这时533333巴黎人官网需要用文本编辑器打开SVG图片,你会看到很多代码,不用管,只需要找到width和height,然删除即可。
  2. SVG文件并不在img标签里

    三、怎么在533333巴黎人官网设计中使用SVG图片出现问题的解决方案

    解决方法
    增加定义object的max-width
    img, object { max-width: 100%; }


文章转载请保留网址:/news/solutions/999.html

深圳市533333巴黎人app创想网络科技有限公司
广东省深圳市罗湖区和平路3001号鸿隆世纪广场B座13G
邮政编码:518000
电话: 0755-82685986/82685936
微信: 159-8667-8737(微信同号)
邮箱: market@iswweb.com
传真: 0755-82685820
微信小程序开发


不加微信即时沟通

深圳市533333巴黎人app创想网络科技有限公司 版权所有
粤ICP备10210107号 Copyright © 2010-2022 All Rights Reserved.