0

我正在尝试使用新的响应式框架来构建我的网站。我已经做了一些测试，并且按照标准，我已经在一个非响应式网站上使用了一个效果，这是一个 Jquery 翻转，我使用一个精灵来让我的图像变成灰色/颜色，并且在翻转时，灰色会随着颜色褪色带有在悬停时打开和关闭图像的文本。

我的问题是，如果我调整它，因为我在响应式网站上的图像没有固定的像素高度，图像显然显示图像的灰色/彩色面。如果我尝试做一个 % 高度和宽度，显然这不起作用，因为它会按比例缩小，因为它很快就会开始显示图像的错误部分。

有谁知道我该如何解决这个问题，我需要一种响应方式来为我的缩略图产生这种效果。我会上传一个示例，这样你就可以看到我到目前为止所得到的。

我的jQuery：

$(document).ready(function() {

    $("a.thumbnail").hover(function() { //On hover...

        var thumbOver = $(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'

        //Set a background image(thumbOver) on the <a> tag 
        $(this).find("div.thumbimg").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
        //Fade the image to 0 
        $(this).find("span").stop().fadeTo('fast', 0 , function() {
            $(this).hide() //Hide the image after fade
        }); 
    } , function() { //on hover out...
        //Fade the image to 1 
        $(this).find("span").stop().fadeTo('slow', 1).show();
    });

});

我在这里做基本的事情，我对 Jquery 没有信心。关于适应这一点的任何想法。

编辑**： http: //www.visualdecree.co.uk/test/index.html - 展示一个快速拼凑的测试页面。希望能帮助你展示我在做什么。

问候米

4

0 回答 0