HTML/CSS 如何用另一个（液体布局）包装图像？

Question

对于作品集，我需要用计算机图像包装所有图像以进行演示。我将使用类似这个例子的东西来包装图像：

图像必须具有流体尺寸（高度和宽度百分比），因此包装纸也......

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

有没有办法做到跨浏览器的方式？

Answer 1

将图像添加为background-image可调整的图像，<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%;
}

更新：我没有考虑重新调整的内部空间。您应该尝试以百分比估计内容和外部之间的距离。

更新：

您可以做的最好的事情是添加<img>文档中的背景图像。不是作为背景涂鸦。这将是您放置内部 div 的画布：

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

CSS

  /* Like pointed out by @Pio, you should add a max-width*/
   .laptop-bg
   {
       max-width: 1000px;
   }


.laptop-bg img
{
    max-width: 100%;
}

.laptop-bg > .laptop-content-bg
{
   /* background-image(url:...); */
   background-color:blue;
   background-repeat: no-repeat;
   position: absolute;
   /* % to outer border */
   left:17.5%;
   top: 17%;
   bottom: 22%;
   right: 18.5%;
}

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