Question

我需要重叠图像和svg（内联）。我也在努力保持流畅的布局。

这是我的代码。图像正确重叠。但是在调整浏览器大小时，2个文件不会缩小范围。

<div id="mainContainer">
<img src="img/png.png" style="position: relevent; z-index: 1; display:block; margin: 0 auto; max-width:400px; width:100%;" />
<svg class="containerA" preserveAspectRatio= "xMinYMid meet" viewBox="0 0 200 240" xmlns="http://www.w3.org/2000/svg">
////some stuff
</svg></div>

CSS

.containerA{
    margin-top:10px;
    display: block;
    position: relevent;
    top: 0;
    left: 0;
}
body {
    background: #fff;
    text-align: center;
}
#mainContainer{
    margin: 0 auto;
    max-width:400px;
    width: 100%;
    z-index:0;
}

Answer 1

使用以下代码：

.containerA {
    margin-top:10px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}
.pngIMG{
    max-width:400px;
} /*For the PNG image, define a class to it. Avoid inline CSS.*/
body {
    background: #fff;
    text-align: center;
}
#mainContainer{
    margin: 0 auto;
    max-width:400px;
    width: 100%;
    z-index:0;
    position:relative;
}

还可以使用media queries：

@media only screen and (min-width: 400px) {
    .containerA, .pngIMG {
        max-width:100%;
        width: 100%;
    } /*For the PNG image, define a class to it. Avoid inline CSS.*/
}

Answer 2

您可以使用焊剂布局（FWD）。

https://en.wikipedia.org/wiki/Adaptive_web_design

它将扩展和维护布局，它有点复杂但允许页面调整大小而不像（RWD）那样推送内容。

它看起来像响应但它正在缩放。 https://www.youtube.com/watch?v=xRcBMLI4jbg

您可以在此处找到CSS缩放公式：

http://plugnedit.com/pnew/928-2/

调整浏览器大小时重叠并保持流体布局

2 个答案: