CSS幫助響應主題

Question

我遇到了一個很大的問題，因此「小」我無法弄清楚，我正在向所有人伸出援助之手。我遇到的問題是這樣的：

我有大約512像素或800像素寬的照片，我想在CENTERED中放置一個圓形顯示區域並保留我的懸停效果。我還需要爲他們設置照片的大小，以便居中的部分顯示出相當數量的照片。

如果照片是完美的正方形，我正在使用的當前代碼將使它們成爲完美的圓形。問題是，當照片是一個矩形，它變成了一個橢圓形。

我已經創建了一個像下面的div使用溢出：隱藏和CSS，但它與當前的CSS衝突。任何幫助將不勝感激！

.thumby { 
width:200px; 
margin: 0 auto; 
overflow:hidden; 
position: relative; 
height: 200px; 
border-radius: 100% 100% 100% 100%; 

}

img.absolutely { 
left: 50%; 
margin-left: -256px; 
top: 50%; 
margin-top: -200px; 
position:absolute; 
width:512px; 

}

這裏的鏈接到我的dev的網頁。

http://www.lmcodebox.com/b-test/index5.html

http://www.lmcodebox.com/b-test/portfolio.html

Answer 1

我重新考慮使用圖像作爲元素的背景的建議的問題，因爲madaaah以上做過。

我最終什麼事做在包裝這樣在我的標籤一個DIV：

然後，我設置這樣的一個背景：風格=「背景：網址（PHOTO URL HERE ）no-repeat; background-position：center;「>

最後，我做了一個方形圖像（800 x 800）進入A標籤內，這樣它會保持圓形並使其完全透明，因此背景圖像是可見的，同時以「響應式」的方式增長和縮小。

Answer 2

你有沒有想過圖像設置爲div的背景是什麼？通過這種方式，您可以保留已經使用的所有效果，並且可以在不影響外部div的情況下操作背景位置。其他可能的解決方案有完美的圓形div，就是使用:: after僞類，就像這個畫廊教程： http://webdesignerwall.com/tutorials/decorative-css-gallery-part-2

對不起，如果我誤解了你，希望它有幫助。

PS .:美麗的測試頁。

Answer 3

---

那麼首先，你只需要圓角半徑設置爲50％，以使事情了一圈，如果每個角落是相同的值，那麼你可以只輸入一次像這樣：

border-radius:50%; 

只要這些圖像是矩形，你可以設置你的圖像作爲跨度的背景，給它一個高度和寬度，形成正方形和使用顯示塊。這樣可以保持照片的比例，但是可以讓它們成爲正方形。

但是，如果您要顯示大量圖像，可能會產生一些標記混亂。另一種解決方案，意味着更多的工作，但我個人會這樣做，就是用photoshop或其他圖像編輯工具將圖像裁剪成正方形。

最重要的是，我沒有看到在您鏈接的頁面上實際聲明的寬度或高度。你確定你把他們放在正確的班上嗎？我看到宣佈的邊界半徑，但我只看到最大寬度：100％;不是寬度：200像素或高度：200像素