如何使一张图像居中于另一张图像

Posted 2023-03-06

【中文标题】如何使一张图像居中于另一张图像

【英文标题】：How to center one image over another

【发布时间】：2013-09-04 13:20:09

【问题描述】：

我有 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 :(

【问题讨论】：

如何将小img居中放在大img上？因为如果我理解正确，框架比 img 本身大，所以你总是可以把框架放在 img 的下面，它看起来是一样的。正确的？ （另外，你不需要它在中间等是透明的。）

【参考方案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; 

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

我希望这对你有用:)

【讨论】：

这是最好的答案

【参考方案2】：

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

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

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

【讨论】：

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

这似乎行得通。

我将不得不看看我是否可以调整我的图像大小......目前主图像不是整齐地 90% 的帧图像:(

我接受了这个作为答案，因为它使用 90% 的图像和 100% 的帧几乎让我到达了那里，所以一切都很好，就像原始问题一样流畅。我使用了 5% 的左边距和 6% 的上边距……真正让我震惊的是，上边距是按宽度的百分比计算的，而不是高度的百分比。一旦我意识到这一点，我就开始工作了。谢谢可以！

【参考方案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;

【参考方案4】：

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

浮动也可以这样做。

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