html - 负 css 行未使用 100% svg 图像正确缩放

Question

希望我能正确解释这一点。

请参阅随附的 fiddle 示例: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 的容器并且所有的 child 都得到了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);
}