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

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

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

EDIT: Я просто вижу, можем ли мы изменить HTML, чтобы извлечь фоновое изображение из DIV и поместить его в отдельный абсолютно позиционированный div в то же самое с IMG-тегом ... тогда тег IMG может быть изменен с помощью CSS.

источник

2011-01-17 Cordial

вы можете указать высоту/ширину в теге html, который будет иметь размер до вашего абсолютного размера. Возможно, вы также можете настроить действие фотошопа и просто запустить партию на этих 35k изображениях?Может занять день :) – jpea

Оригинальная партия была сделана в действии фотошопа, но при 300 dpi. Я всегда ненавидел изображения, явно измененные с помощью HTML, и задавался вопросом, что думают люди ... теперь я нахожу себя соучастником. – Cordial

Я честно считаю, что ваш лучший способ действий - просто запустить другую партию и правильно изменить изображения. Это сэкономит вам головные боли в долгосрочной перспективе. – josh3736

Вы можете использовать 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 фонового размера.

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

источник

2011-01-17 14:02:13 Kyle

это очень полезно, спасибо! – Cordial

И IE9, используя стандартный 'background-size: 200px 50px;' – josh3736

Спасибо Josh, добавили его в :) – Kyle

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

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

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

источник

2011-01-17 14:03:03 Quentin

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

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

источник

2011-01-17 14:03:37

Я наткнулся на это, но на самом деле это не то, что я был после - он не должен быть изменен как таковой, просто изменен! – Cordial

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

Вы также можете создать код для размещения тега <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 + '" />'); 
});

источник

2011-01-17 14:08:27 Marnix

Если мы не сможем получить к HTML это, безусловно, будет способ пойти, большое спасибо за предложение! – Cordial

С помощью CSS:

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

Обратите внимание, что "400% 400%" дает ширину и высоту. Можно также использовать «точки» или «EM», сочетание, авто и т.д. и т.д. См CSS3 спецификации для более из этих деталей: http://www.w3.org/TR/css3-background/#the-background-size

С JQuery вы можете изменить фон-размер примерно так:

$('#myDiv').css({ 
     'background-size': '200% 200%' 
    });

источник

2012-03-13 19:47:24 Andreas

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

ответ

Смежные вопросы