jQuery - можно ли изменить размер фонового изображения до заданного размера? - PullRequest
Новая
       0

jQuery - можно ли изменить размер фонового изображения до заданного размера?

3 голосов
/ 17 января 2011

Я нахожусь в ситуации, когда мне срочно нужно подогнать фоновое изображение div к определенному размеру.Кто-нибудь знает, возможно ли это с jQuery?Я знаю, какой размер должен быть, размер не должен соответствовать размеру div.35 000 изображений были масштабированы до неправильного размера, и его необходимо запустить, поэтому изменение размера изображений не вариант!

Любой совет приветствуется!

РЕДАКТИРОВАТЬ: я просто вижу,Вы можете изменить HTML, чтобы вынуть фоновое изображение из DIV и поместить его в отдельный абсолютно позиционированный div с тем же тегом IMG ... тег IMG можно изменить с помощью CSS.

Ответы [ 5 ]

6 голосов
/ 17 января 2011

Вы можете использовать CSS3 для изменения размера фона.Браузерами, в которых реализована эта функция, являются Opera, Safari, Chrome, Firefox, Konqueror и IE9: 

.myClass
{
    -o-background-size: 200px 50px;
    -webkit-background-size: 200px 50px;
    -khtml-background-size: 200px 50px;
    -moz-background-size: 200px 50px;
    background-size: 200px 50px;
}

Не уверен насчет реализации размера фона в jQuery.

В этом случае, возможно, эта статья поможет вам.

3 голосов
/ 13 марта 2012

С помощью css: 

#myDiv {
            background: transparent url(../../Images/2.jpg);
            background-size: 400% 400%; 
        }

Обратите внимание, что "400% 400%" дает ширину и высоту.Также можно использовать «px» или «em», комбинацию, авто и т. Д., Чтобы узнать подробности в спецификации CSS3: http://www.w3.org/TR/css3-background/#the-background-size

В jquery вы можете изменить размер фона следующим образом:1007 * 

$('#myDiv').css({
        'background-size': '200% 200%' 
    });
2 голосов
/ 17 января 2011

Фоновые изображения можно масштабировать только с помощью функций в черновиках CSS 3, которые еще не получили широкой поддержки в браузерах.

JavaScript может анализировать CSS, находить фоновое изображение, генерировать изображение переднего плана (<img> для него), стилизовать его так, чтобы оно было абсолютно расположено за контентом, и масштабировать его ... но это большая работа.

самое простое и наиболее надежное решение состоит в том, чтобы создать быстрый скрипт с использованием ImageMagick (я бы, вероятно, использовал bash для этого, но PHP или любой другой язык программирования являются опциями ) для изменения размера всех 35 000 изображений на сервере. (Это также может быть самый быстрый подход).

1 голос
/ 17 января 2011

Если фон используется как background-image, вы не можете установить их на 100%.Это может быть найдено 1000 раз на SO здесь, я думаю.Так что это заняло бы какой-то ночной пакет, чтобы изменить их размер.

Вы также можете создать некоторый код для размещения тега <img> внутри div.Затем изображение можно масштабировать до 100%.Чтобы сделать это, вы должны задать что-то своему CSS или div так: 

$('div.niceImage').each(function()
{
    var imUrl = $(this).style('background-image'); // if not in style itself, we should ask it to the CSS rules. Don't know if jQuery does this for you.
    $(this).prepend('<img style="position:absolute;width:100%;height:100%;" src="' + imUrl + '" />');
});
1 голос
/ 17 января 2011

Пожалуйста, прочитайте эту статью 

 #img.source-image {
      width: 100%;
      position: absolute;    
      top: 0;
      left: 0;
}
...