使用100％svg图像时，负css线无法正确缩放

Question

希望我能正确解释一下。

请参阅随附的小提琴，例如：http://jsfiddle.net/Ldd70cnd/

基本上，我有一个宽度为100％的svg图像，然后我要添加2条彩色线条，1条上方和下方1条，但我希望这些线条位于svg的边界内，请参阅图像。

上面的例子显示了svg图像最边缘的线条。

上面的例子显示了我想要线条的位置，我的jsfiddle有顶线正常工作，如果你调整浏览器大小，底线就不会保持一致。

有人可以帮忙吗？

这是我使用的CSS。

.logo-top-line { 
    height:2px; 
    width:100%; 
    background : rgb(88, 168, 144);
    margin-top:3%;
}
img {
    width: 100%;
    margin-top:-2.6%;
}
.logo-bottom-line { 
    height:2px; 
    width:100%; 
    background : rgb(88, 168, 144);
    margin-top:-1em;
}

Answer 1

我相信这会给你你想要的东西：http://jsfiddle.net/Ldd70cnd/1/

这会使用一个position: relative的容器，所有子容器都会position: absolute。然后根据容器边缘的相对位置定义顶部和底部线。

HTML：

<div id="wrapper">
    <div class="logo-top-line"></div>
    <img src="http://s22.postimg.org/skt2j3581/logo2.png" alt=""/>
    <div class="logo-bottom-line"></div>
</div>
<div class="contact text">Mobile: 000000000000</div>

CSS：

* {
    margin:0;
    padding:0;
}
#wrapper {
    position: relative;
}
.logo-top-line { 
    height:2px; 
    width:100%; 
    background : rgb(88, 168, 144);
    position: absolute;
    top: 12.5%;
}
img {
    width: 100%;
}
.logo-bottom-line { 
    height:2px; 
    width:100%; 
    background : rgb(88, 168, 144);
    position: absolute;
    bottom: 11.5%;
}
.contact {
    font-family : Helvetica;
    font-size : 15px;
    line-height : 26.04px;
    color : rgb(31, 80, 108);
}