当我调整浏览器窗口的大小时，我的图像会在它们应该保持在一起时移动答案

【问题标题】：When I resize my browser windows, my Images moves when they should stay together当我调整浏览器窗口的大小时，我的图像会在它们应该保持在一起时移动
【发布时间】：2019-07-03 21:49:27
【问题描述】：

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

我得到了什么：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

测试网站链接：http://calendar.followthesunquiz.com/

【问题讨论】：

标签： javascript jquery html css jquery-ui

【解决方案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%;
}

这些价值观让它为我工作。百分比通常比硬编码的像素值好，因为例如，如果您希望此组合图像在不同的屏幕尺寸下缩放，您可以增加或减少 .my-div 的宽度/高度（确保它们始终是方）并且您不必更改.img-fluid-arm的位置百分比

【讨论】：

修复了它，我从来没有意识到 my-div 有 0px 尺寸，我以为它占用了内容的尺寸非常感谢你们俩