看看圖像的中心與CSS

我陷入了一個問題。我在網站上有一個圖像，通常比屏幕寬度更大。我想要做的是移動此圖像，以便您始終查看中心，即使您正在調整瀏覽器大小。看看圖像的中心與CSS

這樣的代碼：

.center { 
     position: relative; 
     margin-left: auto; 
     margin-right: auto; 
    } 

<img class="center" src="picture.jpg">

沒有幫助。

我找不到合適的解決方案。將圖像用作CSS背景將無濟於事，因爲我想動態更改圖像。

它甚至可以用CSS做到這一點？或者我應該使用JavaScript？

感謝您的閱讀！

來源

2011-07-21 SideEffect

你可以改變一個元素的背景動態太 –

是圖像靜態？換句話說，圖像的尺寸會變化嗎？ – rcravens

寬度將始終相同 - 高度因圖像而異 – SideEffect

使用背景圖像。您不僅可以使用CSS（僞：懸停）更改，還可以（更有效地）使用JavaScript。

.center { 
    background: transparent url('/path/to/image') center center no-repeat; 
    width: 100%; 
    height: 100%; 
} 
.center:hover { 
    background: transparent url('/path/to/another/image') center center no-repeat; 
}

的JavaScript（jQuery的）

$('.center').css('background-image','url(/path/to/image)');

來源

2011-07-21 20:27:09 wanovak

如果他已經有bg圖像會怎麼樣？這是一個糟糕的黑客攻擊。使用一個標準的方法，如身體寬度100％ –

@Jonah Katz ...什麼？ – wanovak

謝謝！如果我在圖像標記中使用寬度和高度爲100％的寬度和高度，則只會在整個瀏覽器大小上拉伸圖像。使用'auto'反轉這個，但仍然無助於查看圖像的中心。 – SideEffect

什麼使用上圖：在你的CSS 50％定位到圖像的中間50％和向左？

來源

2011-07-21 20:53:40 c8irish

它仍然會關閉。像這樣居中，你需要做：'top：50％ - （圖像寬度/ 2）'和'left：50％ - （圖像寬度/ 2）'。雖然這可以用JavaScript來完成，但它不能單獨使用CSS。 – wanovak

位遲到了，但我認爲這是你想要的東西：

.center { 
    position:absolute; 
    top:0; left:0; right:0; bottom:0; 
    margin:auto; 
}

來源

2012-10-02 11:17:33 Mike

看看圖像的中心與CSS

回答

相關問題