Html 我的绝对形象需要回应

我很难让自己的形象反应灵敏。这是一个位于另一个图像之上的图像，所以我使用了绝对定位。如果我把页面缩小，一切都会乱七八糟

这是我对位于另一个图像上方的图像的css

.page-header .logo img {
   position: absolute;
   top: 240%;
   left: 126%;
   width: 200px;
   height: 150px;
   padding:1px;
   border:1px solid #021a40;
   background-color:#000;
   margin-top: -250px; /* Half the height */
   margin-left: -250px; /* Half the width */
}

这是后面图像的css

.page .carousel img {
  -webkit-border-radius: 4px 4px 0 0;
  -moz-border-radius: 4px 4px 0 0;
  border-radius: 4px 4px 0 0;
}

---

如何使上面的图像与后面的图像一起正确调整大小？

这里有一个小提琴，我把它放在一起让你更靠近。根据徽标的大小，您必须稍微调整百分比以获得所需的内容

HTML

<div class='page-header'>
    <div class='carousel' id='portfolio-carousel'>
        <img alt="1396051485478" src="http://www.placehold.it/650x350" class="bg" />
    </div>
    <div class="logo-wrap">
        <img alt="Logo" src="http://www.placehold.it/250x150" class="logo" />
    </div>
</div>

小提琴

---

我相信这会让你得到你想要的。另外，在为您排除故障时，我可能更改了您的一些类名。

您能给我们举个例子吗？Fiddle：当页面调整大小时，顶部图像不会保持不变或缩小。修复了我的Fiddle：我忘记了第一个中的一些css。现在背景调整了大小。要显示什么？较小的图像是否应该完全位于另一个图像的中心？什么图像应该响应？他们应该如何回应？它们应该通过改变覆盖位置来响应，还是应该通过变小和缩放来响应？问题是，您正在设置

徽标的
宽度
和
高度
。它永远不会做出反应。看看这把小提琴，看看我做了什么。希望这能让你更接近：
.page-header {
    position:relative;
    width:100%;
}

.logo-wrap {
    width:100%;
    position:absolute;
    margin-top:-43%;
}

.logo {
    position: absolute;
    padding:1px;
    border:1px solid #021a40;
    background-color:#000;
    top:22%;
    left:25%;
    width:50%;

}

.carousel {
    position:relative;
    width:100%;
}


.bg {
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    width:100%;
}