當我調整瀏覽器窗口的大小時，我的圖片會在應該放在一起的時候移動

Question

調整瀏覽器窗口大小時，所有圖像都會移動

我得到的是： https : //i.imgur.com/x2hqPM3.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.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 個解決方案

解決方案1
0 已采納 2019-07-03 22:14:08

當我調整瀏覽器窗口的大小時，我的圖片會在應該放在一起的時候移動

問題描述

1 個解決方案

解決方案1 0 已采納 2019-07-03 22:14:08

解決方案1
0 已采納 2019-07-03 22:14:08