Question

我遇到了问题，我似乎无法找到问题的原因我对JavaScript和jQuery都有点新意。

但是通过使用下面的内容然后调整页面大小，而不是简单地将图像的大小添加到图像中，src会被重复添加，例如responsive_Course_2_2_large_large_large_large_large_large.png而不是Responsive_Course_2_2_large.png

$(window).resize(function () {

    if ($(window).width() < 600) {

        if (ImageSize != 'stand') {
            $.each(imgIds, function (index, value) {
                Image_src = $('#' + value).attr('src');
                Image = Image_src.replace(/(\.[\w\d_]+)$/i, '$1');
                $('#' + value).attr('src', Image);
                $('#' + value).attr("ImageSize", 'stand');
            });
            $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back.png)');
        }
    }
    else if ($(window).width() > 960 && $(window).width() < 1280) {
        if (ImageSize != 'large') {
            $.each(imgIds, function (index, value) {
                Image_src = $('#' + value).attr('src');
                ImageLarge = Image_src.replace(/(\.[\w\d_]+)$/i, '_large$1');
                $('#' + value).attr('src', ImageLarge);
                $('#' + value).attr("ImageSize", 'large');
            });
            $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back_Large.png)');
        }
    }
   else {
        $.each(imgIds, function (index, value) {
            Image_src = $('#' + value).attr('src');
            Image = Image_src.replace(/(\.[\w\d_]+)$/i, '$1');
            $('#' + value).attr('src', Image);
            $('#' + value).attr("ImageSize", 'stand');
        });
        $('#PageContentRow').attr('style', 'background-image:Url(../img/' + pageID + '_back.png)');
    }
});

Answer 1

这是一种稍微替代的方法，但您是否考虑在调整窗口大小时在body上设置类，然后为适当的大小设置多个CSS类？我认为它会有点整洁，也意味着JavaScript和CSS紧密耦合在一起。这也意味着您可以使用大小来确定页面上元素的其他方面。

Page resize
宽度小于600
- 将正文类设置为small
宽度介于960和1280之间
- 将正文类设置为medium
宽度大于1280
- 将正文类设置为large

这意味着您可以在CSS内完成：

body.small #PageContentRow
{
    background-image: url('/my-image_small.png');
}
body.medium #PageContentRow
{
    background-image: url('/my-image_medium.png');
}
body.large #PageContentRow
{
    background-image: url('/my-image_large.png');
}

Answer 2

因为你一直把它添加到图像中。

下面是切断文件扩展名并向其添加_large。

ImageLarge = Image_src.replace(/(\.[\w\d_]+)$/i, '_large$1');

你的正则表达式应该考虑_large

var str1 = "Responsive_Course_2_2.png";
var str2 = "Responsive_Course_2_2_large.png";

var re = /(_large)?(\.[\w\d_]+)$/i;
console.log( str1.replace(re, '_large$2') );
console.log( str2.replace(re, '_large$2') );

Answer 3

还有 background-size css属性。我不确定你要做什么，但听起来可能适用。

#PageContentRow
{
  background-size: 100%; /* Scales background to #PageContentRow's width */
}

在文件扩展名之前重复添加图像大小

3 个答案: