как передать значение переменной в 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, время: 03:22. |