Question

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

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

main.jpg = 367 x 550

frame.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 :(

Answer 1

我通常使用它：

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

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

我希望这适合你：）

Answer 2

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

<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>

试一试，希望它能按你的意愿运作

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

Answer 4

如果将图像设置为绝对图像;它将从它的容器中取出。

浮动也可以这样做。

z-index怎么样：1;和x-index：2;保证金：自动; ？

如何将一个图像放在另一个图像上

4 个答案: