2015-12-11 33 views
1

我目前正在下列网站设计中心:我怎样才能让我的div的SVG背景图像缩放动态并保持在div

enter image description here

我有两个部分(顶部和底部)都分为两部分(图标和内容)。我试图在图标部分使用居中的svg图像,尽管只要查看区域/浏览器窗口的大小发生变化就会切断图像。我怎样才能防止这种情况发生?

以下是我目前正在使用:

示例 - js fiddle link

SVG图像 - svg image

HTML -

<div id="main1"> 
    <div id="icon1">&#160;</div>​ 
    <div id="links1"> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
</div> 
<br/> 
<div id="main2"> 
    <div id="icon2">​​​</div> 
    <div id="links2"> 
     <p>Content</p> 
     <p>Content</p> 
     <p>Content</p> 
    </div> 
</div> 
<div class="ms-rtestate-read ms-rte-wpbox" contenteditable="false"> 
    <div class="ms-rtestate-notify ms-rtestate-read a64b9522-0ca6-4ff7-a9fc-67a7a27d3071" id="div_a64b9522-0ca6-4ff7-a9fc-67a7a27d3071" unselectable="on"> 
    </div> 
    <div id="vid_a64b9522-0ca6-4ff7-a9fc-67a7a27d3071" unselectable="on" style="display: none;"> 
    </div> 
</div> 

CSS -

<style> 
#main1 > div { min-height: 100px; } 
#main1 { 
    /* overflow to handle inner floating block */ 
    overflow: hidden; 
    border-radius: 25px; 
    border: 2px solid #73AD21; 
    padding: 20px; 
    margin-right: 5%; 
    margin-left: 5%; 
} 

#icon1 { 
    float: left; 
    width: 29%; 
    border-right:thin solid red; 
} 

#links1 { 
    float: right; 
    width: 70%; 
} 
#main2 > div { min-height: 100px; } 
#main2 { 
    /* overflow to handle inner floating block */ 
    overflow: hidden; 
    border-radius: 25px; 
    border: 2px solid #73AD21; 
    padding: 20px; 
    margin-right: 5%; 
    margin-left: 5%; 
} 

#icon2 { 
    float: left; 
    width: 29%; 
    border-right:thin solid red; 
    /* background: url('/support/Shared%20Documents/065__calendar.svg') no-repeat center; */ 
    background-image: url('/support/Shared%20Documents/065__calendar_crop.svg'); 
    background-repeat: no-repeat; 
    background-size: cover; 
} 

#links2 { 
    float: right; 
    width: 70%; 
} 
</style> 
+0

怎么样[示例](http://stackoverflow.com/help/mcve)? – justinw

+0

@Quoid在这里你去:https://jsfiddle.net/dgfsq6k5/。我将要使用的实际环境是在共享点,但我无法访问它(服务器配置为不允许访问互联网),所以这就是我可以获得的例子 – lacrosse1991

回答

1

使用background-size: contain而不是cover并使用background-position: center center来保持居中。

DEMO

审查documentation从W3Schools的:

封面

缩放的背景图像,使背景区域被完全覆盖,以尽可能大的背景图。 背景图像的某些部分可能不是考虑到背景定位区域之内

内含

缩放图像以最大尺寸,使得它的宽度和高度都可以适合内容区域内

+0

真棒,这就是诀窍。谢谢! – lacrosse1991

相关问题