更小的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中的另一个图像上的图像

回答

相关问题