当我调整浏览器窗口大小时，我所有的图像都会移动
我得到的是:https://i.imgur.com/x2hqPM3.jpg
我尝试过使用 Relative、Absolute 和 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;
}
图像应该保持固定在一起
最佳答案
这些图片的使用环境是什么？图像周围的组合区域可以有固定的高度和宽度吗？
因为 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 位置的百分比
关于javascript - 当我调整浏览器窗口大小时，我的图像在它们应该保持在一起时移动了，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56878339/