как передать значение переменной в 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> Хочешь сказать, что пропорции в этом примере не соблюдаются? |
Цитата:
|
Часовой пояс GMT +3, время: 23:24. |