如何将一张图片居中覆盖另一张图片

Question

我有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 中绝对定位 frame，等等，但我做不到当我这样做时让主要图像水平和垂直居中显示。

有没有办法实现我的要求而不需使用 JavaScript？

顺便说一下，我使用2张图片是因为文件大小。我需要主要图像是jpg，这样可以保持小巧，但我也需要frame的透明度，因此必须采用png :(

- Damian

---

关于将小图像置于大图像上方居中的问题怎么样？因为如果我理解正确，框架比图像本身要大，所以您可以始终将框架放在图像下面，这样看起来就一样了。对吗？（另外，您不需要在中间设置透明度等） - avrahamcool

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

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

希望这对你有用 :)

- Wouter Raateland

---

这是最好的答案。 - Youssef Boudaya

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>

试一试，希望它能够按照您的要求工作。

- Can Gokdere

---

我已经尝试过了，但是我无法让第二个（较小的）图像在第一个图像上水平和垂直居中。 - Damian

这似乎有效。 <img class="second-img" src="that.jpg" width="90%" height="100%" style="position:absolute; left:5%;"/> - Can Gokdere

我得看看能否调整我的图片大小...目前主要的图片并没有整齐地占据框架图片的90% :( - Damian

我接受了这个答案，因为它基本上使用了90%的图像和100%的框架，所以一切都像原来的问题一样流畅。我使用了5%的左边距和6%的上边距...真正困扰我的是上边距是根据宽度而不是高度计算的百分比。一旦我意识到这一点，我就让它工作了。谢谢Can！ - Damian

Answer 3

我为您创建了一个 fiddle。

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

在我的fiddle中，框架只是一个黑色背景，图片只是一个红色背景。正如您所看到的，不需要透明框架（因为图片位于其上方）。

我将图片居中于框架之上，而不是将框架居中于图片之上。 （如果我理解正确，这也能达到您的目的） 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;
}

- avrahamcool

Answer 4

如果您将图像设置为绝对定位，它将从其容器中抬起。

浮动可能会产生相同的效果。

那么z-index:1;和x-index:2;与margin:auto;呢？

- Dennis Carney