问题
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?
回答1:
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%;
}
Update: I did not think about the inner spaceing on rezising. You should try to estimate the distance between content and outer in percentage.
Update:
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%;
}
Working fiddle: http://jsfiddle.net/Kq7ym/3/
回答2:
If i were you i would follow this way :
1) create laptop monitor-like div - Its just a div with thick black border + top left and top right rounded borders + 2 elements (green point and reflection) you can create it with CSS or use images.
2) create bottom part of laptop - Its also rounded div + shadow + cavity
来源:https://stackoverflow.com/questions/21829610/html-css-how-to-wrap-an-image-with-another-liquid-layout