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

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>

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