HTML / CSS如何用另一个（液体布局）包装图像？ [英] HTML/CSS How to wrap an image with another (Liquid Layout)?

问题描述

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

For a portfolio, I need to wrap all images with a computer image for presentation. I'm going to use something like this example to wrap images:

图片必须包含流体尺寸（以百分比表示的高度和宽度），因此包装也是如此。

Images must have fluid dimensions (height & width in percent), so the wrapper too..

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

Anyone has an idea about how to achieve that?

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

Is there a way to do it cross-browser way?

推荐答案

将图片添加为可的 background-image >< div> 并附加另一个div与另一个backgrund图像。

Add the image as a background-image of a reziseable <div> and append a second div with another backgrund image.

like：

<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%;
}

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

Update: I did not think about the inner spaceing on rezising. You should try to estimate the distance between content and outer in percentage.

更新：

可以做，是在文档中添加背景图像为< img> 。不作为背景grafik。这将是您的画布以放置内部div：

The best thing you can do, is to add the background-image as <img> in the document. Not as a background-grafik. This will be your canvas to place a inner 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/

这篇关于HTML / CSS如何用另一个（液体布局）包装图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！