Когда я изменяю размер окна браузера, мои изображения перемещаются, когда они должны оставаться вместе
Когда я изменяю размер окна браузера, все мои изображения перемещаются
Что я получаю: 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/
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
В каком контексте будут использоваться эти изображения? Может ли объединенная область вокруг изображений иметь фиксированную высоту и ширину?
Поскольку position: absolute убирает элементы из потока документа, если вы посмотрите на свой <div id = "myDiv" class = "text-center mydiv"> в инспекторе, он имеет высоту и ширину 0 пикселей, потому что он не знает об абсолютно позиционированных элементах внутри него.
Если вы зададите ему фиксированную высоту и ширину, которые будут одинаковыми, например:
.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
это исправило это, я никогда не осознавал, что мой-div имеет размеры 0 пикселей, я думал, что он принимает размеры содержимого. Большое спасибо вам обоим.