jquery - 动态调整分割成部分的图像大小

Question

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

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

图像必须始终看起来像一张大图像，但必须调整大小以适应所有可用空间，同时保持宽/高比。

有没有人做过这样的事情？

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

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/