更小的div中的另一個圖像上的圖像

我知道有類似的問題，但我的是有點特別的。在帶有jQuery Mobile的PhoneGap應用程序中，我想在div中設置另一個圖像，圖像具有相同的寬度和高度。更小的div中的另一個圖像上的圖像

我需要在AJAX請求後用Javascript/jQuery設置圖像。 div的寬度小於圖像的寬度，所以我使用overflow:hidden，並通過圖像margin: 0 -100%，但這種方式只有第一個圖像設置爲中間，第二個低於第一個。

我試圖與position:absolute和top:-(firstImageHeight)

具有相同的結果。

CSS：

#imgdiv{ 
    overflow: hidden; 
    text-align: center; 
    margin-left: auto; 
    margin-right: auto; 
    max-width: 100%; 
    vertical-align: middle; 
    height: 90%; 
    position: relative; 
}

的JavaScript：

var html= "<img src=" + obj.file + " id=" + "imageID" + " />"; 

html += "<img src=" + obj.file + " id=" + "maskID" + " />"; 

$('#imgdiv').html(html); 

$("#imageID").css({"height":"100%", "margin":"0 -100%","z-index":"1"}); 

var imgHeight = $("#imageID").get(0).height; 

$("#maskID").css({"height":"100%", "margin":"0 -100%","z-index":"3","position":"absolute", "top":-(imgHeight)});

來源

2014-09-05 spaghetti_code

你能表現出一定的小提琴嗎？ – 2014-09-05 07:19:21

如果你想要屏蔽底部圖像，可以考慮使用[CSS masks]（http://www.html5rocks.com/en/tutorials/masking/adobe/）。它在移動瀏覽器中似乎相當[廣泛支持]（http://caniuse.com/#search=mask），並可避免整個分層問題。 – martineno 2014-09-05 08:08:54

@martineno：我可以在.jpg和.png圖片中使用它嗎？ – 2014-09-05 08:45:15

與您的代碼，生成的HTML是一樣的東西：

<div id="imgdiv"> 
    <img src="source 1" id="imageID"/> 
    <img src="source 2" id="maskID"/> 
</div>

但你的CSS只定義#imgdiv的位置。這意味着，imgdiv中的圖像根據它們的位置被視爲正常文本流。要正確定位它們，你必須通過css定義它們的位置。無論是#imgdiv> img {}或 - 我喜歡的方式，給他們一個類名。

因爲我沒有你的圖像對象，我包括一些修復圖像鏈接 - 但我想，你可以處理這個，同時適應你的代碼的解決方案。

var html= '<img class="overlayImg" src="http://s21.postimg.org/6iqdjw3vr/excmark.png" id="imageID"/>'; 
html += '<img class="overlayImg" src="http://s21.postimg.org/lq6d48vqf/redcircle.png" id="maskID"/>'; 

$('#imgdiv').html(html);

我們想要將圖像居中放在div中。因此，我們需要div的高度和寬度，以及圖像的高度和寬度：

firstImgLeftPos = ($('#imgdiv').width() - $('#imageID').width())/2; 
firstImgTopPos = ($('#imgdiv').height() - $('#imageID').height())/2; 

scndImgLeftPos = ($('#imgdiv').width() - $('#maskID').width())/2; 
scndImgTopPos = ($('#imgdiv').height() - $('#maskID').height())/2; 

$("#imageID").css({ "top" : firstImgTopPos, "left" : firstImgLeftPos}); 
$("#maskID").css({ "top" : scndImgTopPos, "left" : scndImgLeftPos});

還，因爲我不知道你的頁面和所需尺寸的其餘部分，我通過CSS改變了imgdiv尺寸成固定值並添加紅色邊框，以使div可見。由於圖像現在位於絕對位置，因此內部div的文本排列和垂直對齊會被忽略，因此我將其刪除。，當然，爲新的類.overlayImg添加了css定義。

#imgdiv{ 
    overflow: hidden; 
    margin-left: auto; 
    margin-right: auto; 
    width: 300px; 
    height: 240px; 
    border: 1px solid red; 
    position: relative; 
} 

.overlayImg{ 
    position: absolute; 
}

因爲我的圖像是透明的，z-index是不需要的。雖然你可以通過使用你的id來在你的css中添加這個。

看到這裏的工作小提琴：http://jsfiddle.net/bobpd9e3/3/

來源

2014-09-05 08:49:05 errand

我有一個問題。第一個圖像設置在中間，但第二個圖像保留在div的左側。我寫了這個：$（「＃maskID」）.css（「left」，secondImageLeftPos）;當我用這個檢查它時：console.log（$（「＃maskID」）.css（「left」））;它返回它的左邊屬性被設置。 – 2014-09-05 14:07:24

sry放棄這個線程，我已經離線了一個星期......目前我不現在，如果我得到你的問題的權利。如果pos被設置，那麼它應該正確居中。你有沒有把這個位置設置爲'絕對'？ – errand 2014-09-11 07:19:09

更小的div中的另一個圖像上的圖像

回答

相關問題