Question

我有一个动态图像，当单击图标以覆盖图像以显示它时，会出现该图像。它显示，但偏离中心。

$('.preview').click(function(){
    var img = $(this);
    $("#<%=imgFull.ClientID%>").attr("src", img.attr('fullImg'));
    $("#<%=imgFull.ClientID%>").attr("top", "50%");
    $("#<%=imgFull.ClientID%>").attr("left", "50%");
    $("#<%=imgFull.ClientID%>").attr("margin-top", "-" + (img.width()) + "px");
    $("#<%=imgFull.ClientID%>").attr("margin-left", "-" + (img.height()) + "px");
    $("#overlay").show();
    $("#overlayContent").show();
});

我使用CSS，但是我不太熟悉使用CSS和Javascript，而且我的clientID发生了变化，因为ASP的图像名称在服务器端略有变化。

我用来测试的图片是320px X 240px，但出于某种原因，img.width和img.height等于24px，这没有任何意义。任何解决此问题的建议或解决方案都将非常感激。

编辑每个请求，添加相关功能的完整范围。

Answer 1

请尝试以下代码：

$('.preview').click(function(){
    var img = $("#<%=imgFull.ClientID%>");
    img.attr("src", $(this).attr('fullImg'));

    img.load(function(){
        img.css({
            top: "50%",
            left: "50%",
            marginTop: "-" + (img.width()/2) + "px",
            marginLeft: "-" + (img.height()/2) + "px"
         }, false);
    });
    $("#overlay").show();
    $("#overlayContent").show();
});

现在fullImg attr来自$(this)，实际上是预览图片。 img现在是您必须处理的完整图像元素，使其在屏幕上居中。因此img.width()和img.height()代表完整图片的尺寸，而不再代表缩略图。

更新：更好的是，使用.css()代替.attr()为元素设置css属性。无论如何，你应该担心可能会遇到z-index个问题。

更新2：让我们尝试在加载成功后定位图像。没试过。

Answer 2

我前几天写了一个实用程序脚本来帮助解决这个问题： https://github.com/jshthornton/buoy.js

此脚本不包括水平对齐，因为可以在CSS中实现。此外，如果您不需要IE＆lt; 8的支持，那么您可以使用转换技巧甚至不使用JS。

http://caniuse.com/#feat=transforms2d

http://jsbin.com/paxuv/2/edit

使用Javascript对图像进行居中

2 个答案: