如何將一個圖像置於另一個圖像的中心

我有兩個圖像 - 一個是主圖像，另一個像我想要放置在主圖像頂部的圖片框。圖片幀圖像是一個透明的中心，所以主圖像顯示通過。如何將一個圖像置於另一個圖像的中心

的圖像的尺寸是重要的 - 內主圖像具有比所述幀小，因此，只有通過的中心可見：

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>

...直到你看到一個手機零件的屏幕，該屏幕的偉大工程NE; frame.png會伸展，因爲我已將寬度設爲100％，但背景main.jpg不會隨之伸展。

我需要的設計是流體，所以我需要的圖像拉伸。

有沒有辦法確保背景延伸與主圖像相同？

我試過各種不同的方法來獲得這個工作，絕對定位框架在浮動在主圖像的一個div等，但我不能讓主圖像出現在水平和垂直居中，當我做了那。

有什麼辦法可以實現我想要的而不訴諸於JavaScript嗎？

我使用2張圖片的原因是因爲文件的大小。我需要的主圖像是JPG，所以我可以保持它很小，但我也需要在框架上的透明度，所以必須是PNG :(

來源

2013-09-01 Damian

把小img集中在大集合上怎麼樣？因爲如果我理解正確的話，框架比img本身更大，所以你總是可以把框架放在img下面，它看起來是一樣的。正確？（同樣，你不需要它在中間等透明） – avrahamcool

我一般使用另一個圖像絕對定位爲背景像：

<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-01 07:21:55

我試過了，但我不能得到第一個圖像中水平和垂直居中的第二個（較小）圖像 – Damian

這似乎工作。 –

我將不得不看看我是否可以調整我的圖像大小....主要圖像不是整齊地90％框架圖像此刻:( – Damian

如果圖像設置爲絕對的;它是要提升了它的集裝箱

浮動可能會做同樣的

。

z-index：1;和x-index：2;帶邊距：自動; ？

來源

2013-09-01 09:00:49

我爲你創建了一個小提琴。

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-01 11:58:25 avrahamcool

我通常使用這樣的：

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-01 12:26:38

如何將一個圖像置於另一個圖像的中心

回答

相關問題