[英]Centering image inside DIV not giving expected position
我已成功使用JavaScript和CSS將圖片居中。 我遇到的問題是居中圖像的坐標不是我期望的。 它們代替了所包含div的頂部和左側的“頂部”和“左側”值,它們代表了圖像的確切中心。 這是小提琴 ,我將粘貼我的代碼。 我需要知道框架的確切頂部和左側,以便可以計算服務器端的偏移量。
HTML:
<div id="containment-wrapper">
<img id="imgFrame" class="centerImg" src="http://i.imgur.com/2KKIB.png" name=
"imgFrame">
<div id="drag_resize" style=
"position: absolute; z-index: 1; width:500px; height: 375px;"><img id="#imgSource"
src="http://data.whicdn.com/images/35067333/ocean-life-029_large.jpg" style=
"width: 100%; height:100%;" name="#imgSource"></div>
</div>
<div style="height: 200px;"></div>Frame Position:
<form>
<input type="text" id="framePos"><br>
Image Size: <input type="text" id="imgSize" style="width: 500px;"><br>
Orgignal Image Position: <input type="text" id="imgPos" style="width: 500px;"><br>
Calcualted Image Position: <input type="text" id="imgPosCalc" style=
"width: 500px;"><br>
</form>
CSS:
#containment-wrapper {
border:1px solid; width: 432px;
height: 348px; position: relative;
border: solid 1px;display: table;
text-align: center;
}
.centerImg {
display:block;
margin:auto;
max-width:100%;
top:50%;
left:50%;
opacity:0;
position: absolute; z-index: 9999; pointer-events:none;
}
JavaScript:
$(function () {
var frameTop = 0;
var frameLeft = 0;
$('#imgFrame').each(function () {
imgheight = Math.round($(this).height() / 2);
imgwidth = Math.round($(this).width() / 2);
$(this).attr("style", "margin-top: -" + imgheight + "px; margin-left: -" + imgwidth + "px; opacity:1;");
});
var pos = $('#imgFrame').position();
$('#framePos').val("Top: " + pos.top + " Left: " + pos.left);
frameTop = pos.top;
frameLeft = pos.left;
$("#drag_resize").resizable({
aspectRatio: true,
resize: function (event, ui) {
$('#imgSize').val("W: " + ui.size.width + " H: " + ui.size.height);
},
handles: 'e,w,n,s'
}).draggable({
drag: function (event, ui) {
$('#imgPos').val("Top: " + (ui.position.top) + " Left: " + (ui.position.left));
$('#imgPosCalc').val("Top: " + (ui.position.top - frameTop) + " Left: " + (ui.position.left - frameLeft));
}
});
$('#imgSource').css({
'width': '200px',
'height': '200px;'
})
});
我添加了一個函數來計算框架的真實頂部和左側位置:
function getTrueXY(){
var img = document.getElementById('imgFrame');
//or however you get a handle to the IMG
var fameWidth= img.clientWidth;
var frameHeight= img.clientHeight;
var container = document.getElementById('containment-wrapper');
var conWidth= container .clientWidth;
var conHeight = container .clientHeight;
var trueLeft = Math.round((conWidth / 2) - (fameWidth / 2));
var trueTop = Math.round((conHeight / 2) - (frameHeight / 2));
}
我也更新了小提琴 。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.