[英]When I resize my browser windows, my Images moves when they should stay together
When I resize my browser windows, all my images moves 调整浏览器窗口大小时,所有图像都会移动
What I get: https://i.imgur.com/x2hqPM3.jpg 我得到的是: https : //i.imgur.com/x2hqPM3.jpg
I have tried to use Relative, Absolute and to use a JavaScript code to resize the images 我尝试使用相对,绝对,并使用JavaScript代码来调整图像大小
The HTML: 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>
The CSS: 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;
}
The images should remain fixed together 图片应固定在一起
What I want : https://i.imgur.com/e061Kq6.jpg 我想要的是: https : //i.imgur.com/e061Kq6.jpg
Website link to test: http://calendar.followthesunquiz.com/ 测试的网站链接: http : //calendar.followthesunquiz.com/
What's the context these images will be used in? 这些图像将在什么背景下使用? Can the combined area around the images have a fixed height and width? 图像周围的合并区域能否具有固定的高度和宽度?
Because position: absolute
takes items out of the document flow, if you look at your <div id="myDiv" class="text-center mydiv">
in the inspector it has 0px height and width, because it doesn't know about the absolutely positioned items within it. 因为position: absolute
从文档流中删除项目,所以如果您在检查器中查看<div id="myDiv" class="text-center mydiv">
,它的高度和宽度为0px,因为它不知道其中绝对定位的项目。
If you give it a fixed height and width that are the same, for example: 如果给定相同的固定高度和宽度,例如:
.mydiv {
position: relative;
top: 110px;
width: 500px;
height: 500px;
}
You can position the .img-fluid.arm
image relative to that: 您可以相对于.img-fluid.arm
图像定位:
.img-fluid.arm {
max-width: 10%;
position: absolute;
left: 68%;
top: -10%;
}
Those values got it to work for me. 这些价值观使它对我有用。 Percentages are generally better than hard-coded pixel values, because, for example, if you want this combined image to scale at different screen sizes, you can increase or decrease .my-div
's width/height (making sure that they are always a square) and you shouldn't have to change the percentages on the position for .img-fluid-arm
百分比通常比硬编码的像素值更好,因为例如,如果您希望此组合图像在不同的屏幕尺寸下缩放,则可以增大或减小.my-div
的宽度/高度(确保它们始终一个正方形),而您不必更改.img-fluid-arm
位置的百分比
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.