位置圖像相對於以前的圖像，這是動態的大小和位置

我已經找到了關於圖像的相對定位的許多問題，但他們都依靠父母的DIV失敗在我的情況，你會看到。位置圖像相對於以前的圖像，這是動態的大小和位置

我還發現了固定比例DIV的各種解決方案，那些使用填充底部導致超大高度的情況。

所以這裏是我原來的情況（例如見https://www.giulietta-del-conte.com/）。本質：

<body> 
<img alt="Logo" width=1280 height=853 src="/img/GdC-Logo.jpg"> 
</body>

有了：

img { 
    height:auto; 
    width:auto; 
    max-width:80%; 
    max-height:80%; 
    position: absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    -webkit-transform:translate(-50%,-50%); 
}

現在我要位置的第二圖像（橫幅）正是第一個圖像的下方。橫幅寬度相同，高度更小。

我已經嘗試創建一個父div，但那並不奏效。我無法達到所需的大小，所以我可以調整大小並放置兩個圖像。我試圖用正確的寬度和組合高度來創建它。然而，它不會使用最大寬度和最大高度（變得不成比例）正確調整大小。

創建允許在任一方向調整大小的版本相當容易，但是我無法獲得允許在兩個方向調整大小並以組合塊爲中心的版本。

有什麼想法？我不想創建組合圖像作爲地圖。

來源

2016-08-20 B_pi_P

旁註：你在你的HTML錯誤的''。 – Utkanos

只是複製/粘貼錯誤。這是在原始頁面上，但在這裏沒有任何改變。以上將更正。 –

在兩幅圖像（img +橫幅）的情況下，你希望它們都是水平和垂直居中（好像它們都是單幅圖像），還是希望img居中然後橫幅位於其下方？ –

OK，這裏是一個黑客。我改變了橫幅有兩個圖片的聯合大小。然後我可以正確調整大小並將其居中。它仍然需要正確定位主要（原始）圖片。完成。解決方案可在https://www.giulietta-del-conte.com/上看到。

來源

2016-08-20 16:04:36

這是我第一次來這裏。因此，非常感謝您知道答案是否符合您的預期。也讓我知道，如果它不是你想要的方式。謝謝。

<!DOCTYPE html> 
    <html> 
     <head> 
     <link rel="stylesheet" href="new 1.css"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     </head> 
     <body> 
      <div> 
      <img id= "pic" alt="Logo" width="1280" height="853" src="https://www.giulietta-del-conte.com/img/GdC-Logo.jpg"> 
      <img id="banner" src="https://www.giulietta-del-conte.com/img/Scope.jpg" alt="banner" width="1280" height="200px"> 
      </div> 
     </body> 
    </html>

CSS：

#pic { 
    display: block; 
    width: 100%; 
    height: 100%; 
} 
#banner { 
    display: block; 
    width: 100%; 
    height: 10%; 
} 
div { 
    height:911px; 
    width:1280px; 
    max-width:80%; 
    max-height:80%; 
    position:absolute; 
    top:46%; 
    left:50%; 
    transform:translate(-50%,-50%); 
    -webkit-transform:translate(-50%,-50%); 
}

來源

2016-08-20 12:46:46 Sazz

感謝您的回覆。我以前曾經嘗試過BR，但是它與我的動態（雙向居中）定位失敗。橫幅然後獲得相對於中點的位置。 –

你能向我解釋一下你想在橫幅和圖片之間做些什麼嗎？即使您使瀏覽器變小，圖像之間的空間也會保持不變。 – Sazz

我實際上希望兩個圖像都相互接觸，兩個圖像的寬度相同（動態），使它們看起來像一個。但正如上面解釋的，我不想創建一個組合圖像。上面的測試頁面顯示瞭如果瀏覽器窗口是典型的桌面/筆記本電腦大小所需的效果，但是當您使窗口比例很高或非常寬時失敗。 –

我不認爲這是可能做到沒有使用父母divs居中。但是，可以通過flex和「normal」css的組合來實現該效果。 Here's a working example。

您需要一個水平居中的柔性容器（本例中爲.centered），它佔據了瀏覽器高度的100％。在柔性容器中嵌套，添加非柔性div（例如display: block）。由於非柔性div是柔性佈局的唯一項目，因此它將水平和垂直居中，同時允許您在其中創建單獨的非柔性佈局。

現在，只要圖像的最大寬度設置爲100％（未指定高度），它們的比例將保留，無論其父元素的寬度是多少。當然，我沒有做任何事情來限制垂直溢出，但只要圖像比例不瘋狂，這可能值得一試。

/* For demo purposes */ 
 
* { margin: 0; padding: 0; } 
 

 
.centered { 
 
    display: flex; 
 
    height: 100vh;   /* Needed for vertical centering */ 
 
    align-items: center;  /* Flex - vertical centering */ 
 
    margin: 0 auto;   /* Horizontally center the layout */ 
 
    justify-content: center; /* Flex - horizontal centering of content */ 
 
    text-align: center;  /* Keep images centered in the event of layout width exceeding image width */ 
 
    max-width: 60%;   /* For demo purposes */ 
 
    background: #eee;   /* For demo purposes */ 
 
} 
 

 
/* Nested non flex container allows you to create a separate layout inside the flex container */ 
 
.centered div { 
 
    display: block; 
 
    padding: 10px; 
 
} 
 
img { 
 
    max-width: 100%; 
 
    margin: 5px 0; 
 
}

<div class="centered"> 
 
    <div> 
 
     <img src="http://placehold.it/1000x500"> 
 
     <img src="http://placehold.it/1000x200"> 
 
    </div> 
 
</div>

來源

2016-08-20 19:38:08 antidecaf

感謝您的想法。我只是不知道如何確保圖像的組合高度僅限於視口的80％。 –

位置圖像相對於以前的圖像，這是動態的大小和位置

回答

相關問題