当我调整浏览器窗口大小时,我所有的图像移动
我得到的:https://i.stack.imgur.com/klhwv.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.stack.imgur.com/pfzyy.jpg
网站链接测试:http://calendar.followthesunquiz.com/
这些图像将在其中使用什么上下文?图像周围的组合区域是否可以具有固定的高度和宽度?
因为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