将图像作为边框适合任何尺寸的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

回答

相关问题