When I resize my browser windows, my Images moves when they should stay together
Question
When I resize my browser windows, all my images moves
What I get: https://i.imgur.com/x2hqPM3.jpg
I have tried to use Relative, Absolute and to use a JavaScript code to resize the images
The 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:
.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
Website link to test: http://calendar.followthesunquiz.com/
1 answers
solution1
0 ACCPTED 2019-07-03 22:14:08
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.
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 {
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.