Question

我知道有类似的问题，但我的有点特别。在使用jQuery Mobile的PhoneGap应用程序中，我希望在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)});

Answer 1

使用您的代码，生成的html类似于：

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

但是你的css只定义了#imgdiv的位置。这意味着，imgdiv中的图像 - 根据它们的位置 - 被视为正常的文本流。要正确定位它们，你必须通过css定义它们的位置。使用#imgdiv＆gt; 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/

图像在较小的div中的另一个图像

1 个答案: