將圖像作爲邊框適合任何尺寸的div

我已經看到了幾個使用Wix構建的網站，這些網站使用的圖像是邊框。圖片本身非常龐大，我嘗試了一些技巧，但我無法弄清楚他們如何管理它的生活。這是其中的一個圖像：http://bit.ly/1lZfHRn 將圖像作爲邊框適合任何尺寸的div

我曾嘗試在內容周圍放置外部div，但使用填充和邊距我無法使其正常工作。

在Wix網站上查看時，邊框字面上完美適合，當調整大小時，圖片保留其縱橫比和透明度。但是，維克斯已經設法增加了邊界並降低了透明度。我真的不明白他們是如何處理這個問題的，特別是在使用我鏈接的完全相同的圖像時，大約192 x 192的圖像。

任何人都可以爲我闡述一些這方面的信息嗎？我真的很感激知道這樣的事情背後的工作原理！

來源

2014-04-28 user2195574

你可以發佈一個鏈接到這些網站維克斯的一個？ – 99tharun

http://bit.ly/1fIEtS6 - 有一個鏈接到其中一個wix站點。我使用FireBug刪除圖像，然後右鍵單擊>查看背景圖像。顯示實際大小。 – user2195574

你的意思是這樣的 - FIDDLE？

選擇一個背景，覆蓋圖像，並調整圖像和背景，使其符合您的要求。

CSS

.testme { 
    width: 550px; 
    height: 400px; 
    background: url('http://i.imgur.com/YTPgXWG.jpg') no-repeat; 
    background-size: 550px 320px; 
    padding: 20px; 
} 
img { 
    display: block; 
    width: 450px; 
    height: 250px; 
    margin-left: 30px; 
    margin-top: 10px; 
}

來源

2014-04-28 09:59:59 TimSPQR

本質上是的，除了初始圖像的大小接近2000px sq。然而他們把邊框放在上面，就好像它已經是196px sq，幾乎消除了大部分的中心透明度。 – user2195574

你可以改變圖像的大小爲任何你想要的。您也可以抓住該圖像，將整個中心設置爲黑色，並將其保存爲JPG或PNG格式 - 爲您提供更大的靈活性。 – TimSPQR

我確定我剛剛編輯了FIDDLE，以便它知道使用反射的圖像，並且邊框非常清晰，但仍然不是我期望實現的，正如我在此處發佈的鏈接中描繪的那樣：http：// bit .ly/1fIEtS6 – user2195574

將圖像作爲邊框適合任何尺寸的div

回答

相關問題