当我调整浏览器 windows 大小时，我的图像在它们应该保持在一起的时候移动了

Question

当我调整浏览器大小时 windows，我的所有图像都会移动

我得到的是：https://i.imgur.com/x2hqPM3.jpg

我尝试过使用相对、绝对并使用 JavaScript 代码来调整图像大小

HTML:

<!doctype html>
<html><head>


<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <!-- jQuery library -->



<link rel="stylesheet" href="css/style.css">


<meta charset="UTF-8">
<title>Untitled Document</title>
  </head>
  <body>
  <div id="myDiv" class="text-center mydiv">
    <img class="img-fluid background" src="assets/images/Background.png">
    <img class="img-fluid arm" src="assets/images/image1-arm.png">
  </div>
<script src="js/main.js">
</script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" crossorigins="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  </body>
</html>

CSS:

.img-fluid{
    max-width: 30%;
    height: auto;
    position: absolute;
}
.img-fluid.arm{
    max-width: 10%;
    position: absolute;
    left: 510px;
    top: -80px;}
.img-fluid.background{
    position: absolute;
}
.mydiv{
    position: relative;
    top: 110px;
}

图像应固定在一起

我想要什么：https://i.imgur.com/e061Kq6.jpg

要测试的网站 link：http://calendar.followthesunquiz.com/

Answer 1

这些图像的使用环境是什么？图像周围的组合区域可以有固定的高度和宽度吗？

因为 position: absolute 从文档流中取出项目，如果您在检查器中查看 <div id="myDiv" class="text-center mydiv"> 它的高度和宽度为 0px，因为它不知道绝对定位的项目在里面。

如果你给它一个固定的高度和宽度是一样的，例如：

.mydiv {
  position: relative;
  top: 110px;
  width: 500px;
  height: 500px;
}

您可以相对于 .img-fluid.arm 图像定位：

.img-fluid.arm {
    max-width: 10%;
    position: absolute;
    left: 68%;
    top: -10%;
}

这些价值观使它对我有用。百分比通常优于 hard-coded 像素值，因为，例如，如果您希望此组合图像在不同屏幕尺寸下缩放，您可以增加或减少 .my-div 的 width/height（使确保它们始终是正方形）并且您不必更改 .img-fluid-arm

位置的百分比

当我调整浏览器 windows 大小时，我的图像在它们应该保持在一起的时候移动了

When I resize my browser windows, my Images moves when they should stay together

html

javascript

css

jquery

jquery-ui