Question

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

我得到的是：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;
}

图像应保持固定在一起

我想要的是：https://i.imgur.com/e061Kq6.jpg

要测试的网站链接：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%;
}

这些价值观使它对我有用。百分比通常比硬编码的像素值更好，因为例如，如果您希望此组合图像在不同的屏幕尺寸下缩放，则可以增大或减小.my-div的宽度/高度（确保它们是总是一个正方形），您不必更改.img-fluid-arm

的仓位百分比

当我调整浏览器窗口的大小时，我的图片会在应该放在一起的时候移动

1 个答案: