как передать значение переменной в background-size?
можно ли передать значение переменной в background-size? единственно работоспособный вид которого я добился это
$('#block').css( 'background-size', '666px 444px' );
либо же в %/cover/contain/auto. необходимо вместо конкретных значений задать переменные. возможно ли это? если нет, как можно решить ситуацию? спасибо за ответы |
Цитата:
|
полурезиновый одностраничник, масштабируемый имейдж в фоне. по умолчанию прописано "background-size: cover", но с ним не везде все хорошо. потому написал cover "вручную", то бишь через условие -
примерно так: var w_w_bg = $(window).width();
var w_h_bg = $(window).height();
if( (w_w_bg/w_h_bg) >= 1.7778 ) //соотношение сторон имейджа 16/9
{
var bg_w_res = w_w_bg;
var bg_h_res = (w_w_bg/16*9);
$('.bgwrapper').css( "background-size", "bg_w_res bg_h_res" );
}
else
{
var bg_h_res = ($(window).height()-$('#header').height());
var bg_w_res = (bg_h_res/9*16);
$('.bgwrapper').css( "background-size", "bg_w_res bg_h_res" );
};
этот скрипт решит мою проблему с адаптацией, если я все-таки смогу задать bg_w_res и bg_h_res |
Цитата:
|
вот если на словах, то нужно чтобы в строке
$('#block').css( "background-size", "x y" );
я мог задать параметры x и y :) поскольку на многих мобильных устройствах свойство cover работает коряво вопреки описанию, в частности бардак выходит на айфонах. сейчас используется подгон кода посредством -webkit-min-device-pixel-ratio и прочих неблагозвучностей, и такой вариант адаптации я не считаю оптимальным. поэтому и нужен мой скрипт в работоспособном виде, это сведет адаптацию к минимально корявому коду. |
Цитата:
|
А где твой js код айфон учитывает? Вроде нет таких строк. Только какой-то хедер вычитывает. Это стоит делать через css. И вторую сторону по первой - но и это нахер не нужно, ибо css-значение auto сделает это за тебя.
|
Цитата:
Цитата:
Цитата:
спасибо за комментарии, но основной вопрос вы обходите десятой дорогой. параметры в background-size - можно или нельзя?можно - как? нельзя - почему? |
Цитата:
<style>
div{
height: 50px;
background: url(http://javascript.ru/forum/images/smilies/blink.gif) no-repeat center;
}
.div1{
background-size: 50px auto;
}
.div2{
background-size: auto 50px;
}
</style>
<div class="div1"></div>
<div class="div2"></div>
Хочешь сказать, что пропорции в этом примере не соблюдаются? |
Цитата:
|
хочу сказать что на НЕКОТОРЫХ устройствах - абсолютно верно, не соблюдается.
|
Цитата:
|
kroleternal,
$('.bgwrapper').css( "background-size", "bg_w_res bg_h_res" );
};
ты тут строку передал а не переменную, то в css будет background-size:bg_w_res bg_h_res |
DynkanMaclaud,
при var bg_w_res = 600;
var bg_h_res = 400;
$('.bgwrapper').css({backgroundSize: bg_w_res bg_h_res;});
результат Uncaught SyntaxError: Unexpected identifier при var bg_w_res = 600px;
var bg_h_res = 400px;
$('.bgwrapper').css({backgroundSize: bg_w_res bg_h_res;});
результат Uncaught SyntaxError: Unexpected token ILLEGAL при var bg_w_res = 600+'px';
var bg_h_res = 400+'px';
$('.bgwrapper').css({backgroundSize: bg_w_res bg_h_res;});
результат Uncaught SyntaxError: Unexpected identifier во всех вариантах не работает я неверно задаю параметр? |
kroleternal,
Цитата:
|
И вот я еще писал, ты видимо не увидел:
Цитата:
|
danik.js,
Цитата:
если вы отключили js, то на моем проекте получите css со свойствами background-size: cover -webkit-background-size: cover -o-background-size: cover -moz-background-size: cover и поскольку в вашей вселенной это свойство работает без проблем, то вы получите ожидаемую неломаную верстку. я же пытаюсь учесть и людей из других галактик, у которых оно может не сработать, и обезопасить верстку скриптом. и все что я просил - ответ, принимает свойство параметры или нет. и поскольку в ходе дискуссии я обрел уверенность что у вас нет ответа, то очевидно ваши комментарии направлены на увеличение количества постов, не более. если вас действительно интересует, съехавшую верстку мой координатор обнаружил на айпаде. не уточнял каком |
kroleternal,
bg_w_res + " " + bg_h_res |
рони,
не работает((( var bg_w_res=$(window).width();
var bg_h_res=$(window).height();
$('div').css('background-size',bg_w_res + " " + bg_h_res);
|
Цитата:
|
Цитата:
bg_w_res + 'px ' + bg_h_res + 'px' |
Ruslan_xDD,
благословен будь, смертный! (или как вас там по батюшке). спасибушка) |
kroleternal, удачи и побольше говнокода тебе, от всей души!
|
danik.js,
благодарю! всегда обращайся |
эхх я вот только одного понять не могу, kroleternal, ты сделал этот скрипт чтобы верстка в старых браузерах не ломалась но как же она будет не разваливаться ведь на js ты используешь свойство background-size, а оно ими(старыми браузерами) не поддерживается)))))
|
DynkanMaclaud,
не совсем верно. проблема решается не для старых браузеров, поскольку по загадочной прихоти дизайнера и заказчика этот сайт вообще не рассчитан на "слабый доступ": там одних бекграундов мегов на 10, тяжелые слайдеры и прочее. нафига - вопрос не ко мне) проблема в том что на новеньких сафари ехал фон. вот для того и делается. по-хорошему я бы выкинул большую часть этого добра и все было бы красиво |
результирующее, кому понадобится:
$('#block').css( 'background-size', bg_w_res + 'px ' + bg_h_res + 'px' );
$('#block').css( 'background-position', a + 'px ' + b + 'px' ); //если фон получается больше самого блока, позиционирование необходимо задать в пикселях, а не, например, top center, иначе имейдж впишется в блок
|
kroleternal, и много ли заказчик платит за такой "код"? :)
|
Ruslan_xDD,
не за код, а за свое извращенное представление о прекрасном) |
| Часовой пояс GMT +3, время: 17:22. |