使用CSS和HTML的垂直和水平居中的可變大小的圖像放大（以div爲單位）

因此對於很多年來，我一直在努力實現這一目標。基本上我的網站允許管理員上傳目錄中每個項目的縮略圖和放大圖像。縮略圖顯示在顧客看到的頁面上，放大顯示在縮略圖的懸停上。使用CSS和HTML的垂直和水平居中的可變大小的圖像放大（以div爲單位）

我無法控制正在上傳的圖像的大小（我想我可以限制寬度和高度，但在這種情況下這是不實際的）。

我想垂直和水平居中這個圖像放大。它包含在與position: fixed;的div中。我相信，（雖然我沒有在那一刻我前面的代碼），我目前使用類似以下內容：

.image-enlargement 
{ 
    position: fixed; 
    left: 50%; 
    top: 50%; 
    width: 300px; 
    height: 400px; 
    margin-left: -150px; 
    margin-top: -200px; 
}

我可能已經改變了它使用jQuery - 我可以」不過請記住，很久以前，我上次在網站上的這一點上工作過。現在我想要對上面的代碼做的是取出寬度，高度和邊距規格，以便允許圖像（無論大小）精確居中，並且不使用JavaScript。

有沒有人曾經實現過這個？如果是這樣，怎麼樣？我確信必須有某種方法來實現這個結果，但還沒有遇到純粹的CSS/HTML解決方案。

編輯：JSFiddle在http://jsfiddle.net/Y7xAp/。

來源

2011-01-27 ClarkeyBoy

只是增加了一個JSFiddle與我最近的嘗試 - obv因爲-50％的邊距使用容器的寬度/高度，所以它不起作用。儘管如此，我應該相對容易地看到我正在嘗試做什麼。 – ClarkeyBoy 2011-01-27 03:17:43

可能重複的[如何水平和垂直居中div？]（http://stackoverflow.com/questions/4325643/how-to-horizontal-vertical-center-a-div） – Phrogz 2011-01-27 03:22:26

另請參見http：// stackoverflow .com/questions/2726219/position-div-center-horizontal-and-vertical和http://stackoverflow.com/questions/2498552/horizontal-and-vertical-center-text-in-html和http：// stackoverflow .com/questions/4416130/how-to-center-a-div-vertical和http://stackoverflow.com/questions/4460677/css-trick-for-centering-horizontal-and-vertical ...等。 – Phrogz 2011-01-27 03:23:08

如果你可以在這裏發佈你的標記，那麼這將是很好的，這樣我們可以幫助你更好。至於圖片元素的大小，您可以指定它的寬度和高度，以便用戶將要上傳的圖片的大小仍然相同。你可以這樣做，<img src="<image url>" height="100" width="100"/>

來源

2011-01-27 03:01:30

不知道這將是多麼有用的情況，但解決方法是將圖片顯示爲背景圖片。代碼可能如下所示：

#container { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: transparent url('myImage.jpg') center center no-repeat; 
}

然後，瀏覽器將正確計算要垂直和水平居中的圖像位置。然後在onClick或類似的東西上放置一個事件，以檢測他們何時想要圖像消失。

來源

2011-01-27 03:42:13

使用CSS水平和垂直居中div的最佳方式是通過彈性框。

使用display：容器上的flex和margin：auto在內部元素上。

請記住：這是一個很好的解決方案，新的瀏覽器和容器應該有和高度顯示：flex工作正常。在這種情況下，我使用vh/vw單位（視口高度/寬度的1/100）。

嘗試使用這樣的：

.image-enlargement { 
    position: relative; 
    display: flex; 
    width: 100vw; 
    height: 100vh; 
} 

.image-enlargement img { 
    margin: auto; 
}

要了解更多關於Flex盒和大衆/ VH單位閱讀：

來源

2016-07-04 18:32:59

使用CSS和HTML的垂直和水平居中的可變大小的圖像放大（以div爲單位）

回答

相關問題