Вход

Просмотр полной версии : картинка во весь экран


cha0s
23.07.2014, 16:24
#about_us_logo {
background: url(img/about_logo.jpg);
background-repeat: no-repeat;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
}


<div id="about_us_logo"></div>

Все хорошо как-бы, но как сделать чтоб при уменьшение экрана эта картинка которая на весь экран не уродовалась сжимаясь, а прятала свои края и оставалась всегда по центру(то есть overflow:hidden той части которая не попадает во весь экран)

нашел пример http://jsfiddle.net/LSKRy/654/
тут реализовано все так как мне нужно, при уменьшение картинка обрезается и всегда остается по центру, вопрос можно ли такое реализовать на одном <div id="about_us_logo"></div> без этих right: -50%; / left: -50%; div блогов как на образце.

рони
23.07.2014, 16:31
cha0s,
http://javascript.ru/forum/misc/48806-proporcionalnoe-centrirovanie-kartinki-na-bekgraunde-2.html#post321626

cha0s
23.07.2014, 16:58
спасиб, но нужно этот resize чтоб работал именно на этой структуре <div id="about_us_logo"></div> без добавления картинки так таковой во внутрь контейнера, просто внутри блока у меня куча других блогов со своей информацией которая отображается на full width картинке, не могу я туда добавлять <img ....> куча всего разлетается тогда сразу.

глупо наверное будет данную штуку

$(window).load(function () {
$("img").fullCenter()
});
$(window).resize(function () {
$("img").fullCenter()
});


вешать на мой div, ибо там уже наверное бред будет если он к divu будет добавлять свои
..........
width: a / b * c,
height: a,
left: -(a / b * c - f) / 2,
top: -(a - e) / 2
.........

рони
23.07.2014, 18:24
cha0s,
background: url(img/about_logo.jpg) 50% 50%;
background-repeat: no-repeat;
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size: cover;
background-size: cover;

cha0s
23.07.2014, 19:08
воо так и думал что должно быть что-то на css! отлично работает! спасибо как обычно тебе :thanks: