Css 创建缩放到浏览器高度但具有设定宽度的svg
我试图在illustrator中创建一个svg,并将其用作背景图像,填充到页面的顶部和底部,但仍然位于950px宽的div中,我遇到了无尽的麻烦Css 创建缩放到浏览器高度但具有设定宽度的svg,css,html,svg,background-image,Css,Html,Svg,Background Image,我试图在illustrator中创建一个svg,并将其用作背景图像,填充到页面的顶部和底部,但仍然位于950px宽的div中,我遇到了无尽的麻烦 <?xml version="1.0" encoding="utf-8"?> <!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!DOCTYPE svg PUBLIC "-//W3C
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="950px" height="522.785px" viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>
我尝试了从svg中删除大小和在css中添加样式的各种不同组合,例如:
background-size: cover;
background-size: 950px cover;
background-size: 100% 100%;
background-size: contain;
但我所做的一切似乎都不管用。有什么想法吗?关于SVG,可能有一些基本的东西我就是不明白?当我可以让它显示任何东西时,其行为似乎是要么完全设置大小,要么设置大小,然后当我缩小窗口时,它缩小宽度并保持纵横比
不管窗户有多大,它都应该是这样的:
但是当我把窗户的高度调大,它的侧面就消失了,这是在使用
background-size: cover;
在css中,svg中没有维度
当我添加一组宽度时,如下所示:
background-size: 950px cover;
它显示如下:
如果我把窗户弄小,是这样做的:
这尤其令人讨厌
编辑
剩下的css和HTML看起来是这样的
CSS
HTML
使用
max width
CSS属性。试试这个:
#middle{
max-width: 950px;
margin: 0px;
height: 100%;
float: left;
display: block;
background: url(../images/l.svg) no-repeat left top #00aeef;
background-size: 950px 100%;
}
找到了解决我问题的办法 使用
preserveAspectRatio="none"
在svg文件中
像这样:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" preserveAspectRatio="none" >
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>
*以下是结果*
大窗户
小窗口包含
div
。另外,是包含在另一个div
中的div,还是仅仅是主体
?这只会给我一个黑屏,因为中间的元素没有填充。另外,更新的背景大小属性也不起作用,仍然是黑色。到目前为止,我在谷歌chrome 21和ff 14中测试了这一功能
#middle{
max-width: 950px;
margin: 0px;
height: 100%;
float: left;
display: block;
background: url(../images/l.svg) no-repeat left top #00aeef;
background-size: 950px 100%;
}
preserveAspectRatio="none"
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" preserveAspectRatio="none" >
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>
#middle{
width: 950px;
margin: 0px;
height: 100%;
float: left;
display: block;
background: url(../images/l.svg) no-repeat left top #00aeef;
background-size: 100% 100%;
}