8

我有 2 张图片 - 一张是主图，另一张像相框，我想放在主图的顶部。相框图像是具有透明中心的 png，因此主图像可以显示出来。

图像的尺寸很重要 - 内部主图像必须小于框架，因此只能通过中心看到：

主.jpg = 367 x 550

帧.png = 405 x 597

我以为我有下面的代码......

<div style="background-image:url('/main.jpg') no-repeat scroll center center transparent;">
<img style="width:100%; max-width:100%;" src="/frame.png">
</div>

...在您看到手机屏幕之前效果很好；frame.png 会拉伸，因为我将宽度指定为 100%，但背景 main.jpg 不会随之拉伸。

我需要设计流畅，所以我需要拉伸图像。

有没有办法确保背景拉伸与主图像相同？

我已经尝试了各种不同的方法来使其正常工作，将框架绝对定位在浮动在主图像上的 div 中，等等，但是当我这样做时，我无法让主图像水平和垂直居中。

有没有什么方法可以在不使用 javascript 的情况下实现我想要的？

顺便说一下，我使用 2 张图片的原因是因为文件大小。我需要主图像是 jpg，这样我就可以保持它的小，但我还需要框架上的透明度，所以它必须是 png :(

4

4 回答 4

17

我通常使用这个：

HTML：

<div id="frame">
    <img id="myImg" src="main.jpg">
</div>

CSS：

#frame {
    position: relative;

    width: 597px;
    height: 405px;

    background-image: url(frame.png);
    background-position: center;
    background-size: cover; }

#myImg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    display: block;
    margin: auto; }

这适用于具有固定尺寸或设置最大宽度和最大高度的所有图像和其他元素。

我希望这对你有用:)

于 2013-09-01T12:26:38.640 回答
3

我通常使用另一个绝对定位为背景的图像。像：

<div>
<img class="background-img" width="100%" height="100%" style="position:absolute; top:0; left:0">
<img class="second-img" width="100%" height="100%" /> 
<!-- Then do the positioning with classes -->
</div>

试一试，希望它能如你所愿

于 2013-09-01T07:21:55.837 回答
3

我为你创造了一个小提琴。

http://jsfiddle.net/avrahamcool/4VQzP/

在我的小提琴中，框架只是黑色背景，而 img 只是红色背景。如您所见，不需要透明框架（因为img在它上面）

我不是将框架居中于 img 上方，而是将 img 居中于框架上方。（如果我理解正确，这也符合您的目的）

HTML：

<div id="Frame">
    <span class="Centerer"></span><img src="http://i.imgur.com/CbcmRLC.jpg"/>
</div>

CSS：

#Frame
{
    width: 405px;
    height: 597px;
    background: url('http://i.imgur.com/uRvKrNR.jpg') no-repeat;
    text-align: center;
}
.Centerer
{
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}
#Frame > img
{
    vertical-align: middle;
}
于 2013-09-01T11:58:25.483 回答
0

如果将图像设置为绝对；它会从它的容器中升起。

浮动也可以这样做。

z-index:1 怎么样？和 x-index:2; 带边距：自动；?

于 2013-09-01T09:00:49.257 回答