HTML / CSS如何用另一个图像包装图像（Liquid Layout）？

Question

对于投资组合，我需要用计算机图像包装所有图像以进行演示。我打算用这个例子来包装图像：

图像必须具有流体尺寸（高度和宽度，以百分比表示），所以包装也是如此..

任何人都知道如何实现这一目标？

有没有办法跨浏览器方式呢？

Answer 1

将图片添加为可重复background-image的{​​{1}}，并使用另一个背景图像附加第二个div。

像：

<div>

更新：我没有考虑重新定位的内部空间。您应该尝试估算内容与外部之间的距离百分比。

更新

您可以做的最好的事情是在文档中添加背景图像<div class="laptop-bg"> <div class="laptop-content-bg"></div> </div> .laptop-bg { background-image:url(...); background-repeat: no-repeat; width:100%; background-size: contain; background-clip: border-box; position:relative; } .laptop-bg > .laptop-content-bg { background-image: url(...); background-repeat: no-repeat; position: absolute; /* % to outer border */ left: 6%; top: 6%; bottom: 6%; right: 6%; } 。不是背景 - 格拉菲克。这将是你放置内部div的画布：

<img>

CSS

<div class="laptop-bg">
    <div class="laptop-content-bg"> 
    </div>
    <img src="http://i.stack.imgur.com/uS7Xm.png" />
</div>

工作小提琴：http://jsfiddle.net/Kq7ym/3/

Answer 2

如果我是你，我会这样：

1）创建类似笔记本电脑监视器的div - 它只是一个带有黑色粗边框的div +左上角和右上角的圆角边框+ 2个元素（绿色点和反射），你可以用CSS创建它或使用图像。

2）创建笔记本电脑的底部 - 它还圆形div +阴影+腔