html - 调整浏览器大小时重叠并保持流畅的布局

Question

我需要重叠图像和 svg(内联)。我还试图保持流畅的布局。

这是我的代码。图像正确重叠。但是当调整浏览器大小时，这两个文件并没有按比例缩小。

<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.*/
}