對齊圖像的一部分

我想在我的網站上使用非常寬的圖像。圖像上有一個主要項目，其餘的是背景。但我希望這個主要項目始終對齊，而圖像應顯示或多或少的背景，具體取決於窗口大小的寬度...對齊圖像的一部分

我試圖在圖像中清除它：
enter image description here

所以，紅色邊框是整個圖像（它有4000px的寬度），但它有它只有一個主項。在我的情況下，一個女孩的照片。背景（除綠色邊框外的紅色邊框內的所有內容）都充滿了鮮花。我想要的是成爲女孩（綠色邊框），通過一切手段在中間對齊。取決於窗戶的大小，花朵應該更多或更少可見（但沒有滾動條）。

但我沒有任何想法如何做到這一點...任何人的建議？

enter image description here

來源

2012-03-23 Michiel

+1對於蒙娜麗莎的美麗演繹你有。 – 2012-03-23 15:56:18

哈哈，哈哈:)謝謝你的讚美！ – Michiel 2012-03-23 15:57:13

我將圖像分爲兩部分 - 花朵 - 用作中心div /表格012g上的bg以及將作爲「」 – Elen 2012-03-23 16:00:01

如果它是一個單一的裝飾性圖像，那麼你可以使用：

background-image: url(whole.jpg) 50% 50% no-repeat

調整第一百分比，如果像你的有趣的部分是不完全的中心。

如果您想要爲女孩使用單獨的<img>，併爲鮮花分開使用圖片，請使用one of the usual vertical-CSS-centering hacks代替<img>。

#container {position:relative; overflow:hidden} 
#container img {position:absolute; top:50%; left:50%; 
    margin-top:-half-of-image-in-px; margin-left:-half-of-the-image-in-px;}

和前者爲背景風格。

如果您想成爲尖端產品，可以使用CSS3 object-fit property。

來源

2012-03-23 16:00:30 Kornel

感謝您的答案。這是一個單一的圖像......如果我理解正確，上面的css會將圖像與左邊50％和右邊50％對齊，對吧？但是如果圖像寬度爲4000像素，窗口只有1000像素，該怎麼辦？ – Michiel 2012-03-23 16:03:59

@Michiel background-position with'％'將圖像中指定百分比的點與容器中具有相同百分比的點對齊，因此'50％'將圖像的中間與容器的中間對齊 - 即在所有情況下完美對齊。 – Kornel 2012-03-23 17:12:57

我試過你的第一行代碼，但沒有運氣......也許你會變得更好，我的意思是如果你在我原來的帖子中看到我的圖像... – Michiel 2012-03-23 22:48:48

如果女孩處於圖片的中心，這應該不成問題。只需使用圖像作爲body的background-image。使用CSS3可以使背景的大小調整到屏幕的整個寬度。如果容器的縱橫比等於圖像的比例，則使用background-size: contain;。如果不是，並且您仍然希望在不裁剪圖像的情況下填充整個窗口，請使用background-size: cover;。另一種可能性是使用background-size: 100% auto;。

瞭解更多關於CSS3背景大小here

理想的情況下，這將是最好有女孩作爲一個單獨的圖像和背景爲一種模式，所以你可以使用該模式與重複-X和女孩在不同的容器上，即使你可以有CSS3的多個背景。但是，通過這樣做（即針對不同背景的不同容器），您將擁有更好的跨瀏覽器支持。

來源

2012-03-23 16:09:09

對齊圖像的一部分

回答

相關問題