动态调整部分切碎的图像

Question

我正在使用jquery mobile开发移动应用程序。我正在寻找一个解决方案来完成以下任务：

大图像分为三个单独的可点击图像

图像必须始终看起来像一个大图像，但必须调整到所有可用空间，同时保持宽高比。

以前有人做过这样的事吗？

我尝试过使用表并使用jquery mobile“内容网格”但没有成功。

Answer 1

我将图像保存为一个图像，使用以下内容 - 底部的工作小提琴链接。 您可以更改“low_starts_here”和“right_starts_here”以满足您的需求。 你也可以在css中切换到“width：auto; height：100％”，如果这对你更好。

HTML：

<img src="/myimage.jpg" id="myimage" />

的CSS：

#myimage{
 width:100%;
 height:auto;    
}

jquery的：

$(function() {    
    $('#myimage').on('click', function(e){
        var area = '';
        var low_starts_here = 0.6;
        var right_starts_here = 0.5;
        var x = Math.round(e.pageX - $(this).offset().left);
        var y = Math.round(e.pageY - $(this).offset().top);
        var w = $(this).width();
        var h = $(this).height();
        if(y/h > low_starts_here){
            // bottom area - do something
            alert('bottom');
        }
        else{
            if(x/w > right_starts_here){
               // top right area - do something
               alert('top right');
            }
           else{
               // top left area - do something
               alert('top left');
            }
        }

    });
});

http://jsfiddle.net/uLHhQ/6/