css/JavaScript调整div内容大小以适应窗口

Question

我有一个页面上的许多图像位于另一个图像的顶部。较小图像的位置是相对的，左侧和顶部的距离是使用px给出的。当我缩放窗口时，图像集合移动并保持在正确的位置。但我希望它在我调整窗口大小时也能缩放。(图像的比例应该保持不变，但要小/大。)所有的图像都包含在一个覆盖的div中。

有什么方法可以让我在不重新定位所有图像的情况下做到这一点吗？(我是css/JavaScript的新手)

这是一个例子，我想让红色的球停留在山顶，但是如果窗口变小，山和球就会缩小。，https://codepen.io/gwenvere/pen/MWJdvJp，the，of，of，the，the，

以下是其中一个较小图像的css示例：

  position: relative;
  left: 161.7px;
  top: 208.7px;
  width: 79px;
  height: 79px;
  background-color: rgba(56, 152, 236, 0);
  background-image: url('../images/Medium.png');
  background-position: 0px 0px;
  background-size: cover;
}

大图的css：

.image-11 {
  position: absolute;
  left: 0%;
  top: 148px;
  right: 0%;
  bottom: 0%;
  width: 1200px;
  max-width: 1200px;
  margin-top: -37px;
  margin-right: auto;
  margin-left: auto;
}

覆盖div的css：

.div-block-3 {
  position: relative;
  width: 1200px;
  height: 800px;
  max-height: none;
  max-width: none;
  min-height: auto;
  min-width: auto;
  margin-right: auto;
  margin-left: auto;
  background-color: rgba(83, 39, 39, 0);
  -webkit-transform-origin: top left;
}

Answer 1

Codepen中的图像被设置为position: absolute，宽度和高度分别为1200px和800px，因此不会调整大小。

由于您对问题的描述谈到了调整窗口大小，我假设您希望主图像放大和缩小，并使红点保持在相同的相对位置。

使用CSS的一种方法是使用宽度和高度的百分比来定位红点，并使用宽度的百分比来缩放点的大小(使用比率来设置点的高度。

​

body {
    padding: 0;
    margin: 0;
}
.body {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin-top: 147px;
    margin-right: auto;
    margin-left: auto;
    background-color: rgba(83, 39, 39, 0);
}

.largeImage {
    width: 100%;
    height: auto;
}

.smallImage {
    display: block;
    position: absolute;
    left: 57.5%;
    top: 26.17%;
    width: 6.67%;
    height: auto;
    transform: translate(-50%,50%);
    background-color: rgba(56, 152, 236, 0);
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/3/31/Circle_Burgundy_Solid.svg/1024px-Circle_Burgundy_Solid.svg.png");
    background-position: 0px 0px;
    background-size: cover;
    margin: 0 auto;
}

.smallImage::before {
    display: block;
    padding-top: 100%;
    content: "";
}

.smallImage a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

<div class="body">
    <img src="https://media.sproutsocial.com/uploads/2017/02/10x-featured-social-media-image-size.png" loading="lazy" alt="" class="largeImage">
    <div class="smallImage">
        <a href="#videoPlayer" id="smallBtn"></a>
    </div>
</div>

​

我在图片上方加上了一个页边距，就像你在你的Codepen中一样。