Про картинку в качестве фона
Ребят, подскажите, можно ли задать такую зависимость:
есть картинка-фотография фоном. Я хочу, чтобы она занимала все окно, но не меняла пропорций при этом. Мне кажется, что самый удобный вариант будет таким: если картинка пропорционально длиннее, чем экран, то её кусок справа просто не отображается, как бы обрезается. и полоса прокрутки при это не появляется если картинка выше при стопроцентной ширине, то обрезается в высоту, опять же без прокрутки. Так делают? |
В общем, я даже нашла, что нужно получить.
Но не могу соединить. У меня есть такой код для страницы:
<script type="text/javascript">
var i , t,
b;
var speed = 6000
var Pic = ['image/img_1.jpg',
'image/img_2.jpg',
'image/img_3.jpg',
'image/img_4.jpg']
var j = 0
var p = Pic.length
for (i = 0; i < p; i++){
var preLoad = new Image()
preLoad.src = Pic[i]
Pic[i] = preLoad
}
function get(a) {
var c = document,
d = c.body,
e = c.documentElement,
f = "client" + a;
a = "scroll" + a;
return c.compatMode === "CSS1Compat" ? Math.max(e[f], e[a]) : Math.max(d[f], d[a])
}
window.onload = fon;
i = new Image;
function fon() {
window.clearTimeout(t);
j++
j %= p
i.src = Pic[j].src;
i.style.position = "absolute";
i.style.left = "0px";
i.style.top = "0px";
i.style.height = get("Height") + "px";
i.style.zIndex = -999;
i.id="img"
document.body.appendChild(i)
t = setTimeout(fon, speed)
}
window.onresize = function () {
var i = document.getElementById("img");
if(i) document.body.removeChild(i);
window.clearTimeout(b);
b = window.setTimeout(function () {
fon()
}, 20)
};
</script>
и есть вот такая штука, которая как раз и делает, то что мне нужно:
<img src="images/bg.jpg" id="bg" alt="">
#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }
$(window).load(function() {
var theWindow = $(window),
$bg = $("#bg"),
aspectRatio = $bg.width() / $bg.height();
function resizeBg() {
if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
$bg
.removeClass()
.addClass('bgheight');
} else {
$bg
.removeClass()
.addClass('bgwidth');
}
}
theWindow.resize(function() {
resizeBg();
}).trigger("resize");
});
как мне их совместить? чтобы функция второго скрипта применялась к переменным первого. Чтобы эти вот меняющиеся картинки растягивались согласно скрипту номер два. |
С обрезанием это элементарнейший вариант. Делается это без всякого js:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
margin: 0; padding:0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
img {
min-width: 100%;
min-height: 100%;
}
</style>
</head>
<body>
<img src="http://www.deviantart.com/download/358128988/new_visitor_by_maxdamagetorture-d5x7y3g.jpg"/>
</body>
</html>
|
Кажется я этот [говно]код (#2) где-то уже видел. Где вы его взяли?
|
Цитата:
Спасибо. |
Всем доброго дня! Сразу оговорюсь, что я в программировании НОЛЬ!
нужна помощь!
<script language="JavaScript" type="text/javascript">
//<![CDATA[
<!--
window.open("http:.........com", "Name","location=1, toolbar=0, directories=0, menubar=0, scrollbars=0, resizable=0, width=500, height=700");
//-->
//]]>
</script>
Вопрос! Можно ли, если да то где, и что нужно вставить, чтобы появилась полоса прокрутки (боковая) сверху вниз. Заранее спасибо! |
Uladzimir, а где картинка?
|
Это не картинка, а ссылка на вот это http://scores.betrescue.com/golf/
|
Тогда как твой вопрос связан с текущей темой ("Про картинку в качестве фона") ?
|
Конкретно темы только о прокрутке я не нашёл, перенаправьте пожалуйста и я там оставлю свой пост
сори что не в тему! Просто устал искать. |
методом тыка сделал scrollbars=yes
Сори что отвлёк! |
Эхх.
У меня этот код:
<!DOCTYPE HTML>
<html lang="ru-RU">
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
margin: 0; padding:0;
}
html, body {
width: 100%;
height: 100%;
overflow: hidden;
}
img {
min-width: 100%;
min-height: 100%;
}
</style>
</head>
<body>
<img src="http://www.deviantart.com/download/358128988/new_visitor_by_maxdamagetorture-d5x7y3g.jpg"/>
</body>
</html>
не распространяется на картинку, которая задана через скрипт. Можно ли задать те же параметры картинке, но через javascript? |
Ahterknica,
image.style.minHeight = "100%" ; image.style.minWidth = "100%" ; где image - ваша картинка |
вот. мне нужен суперкод.
Чтобы либо ширина, либо высота была равно всегда 100%, а вторая часть обрезалась. такое существует? |
я дошла до состояния, что белых кусков нет. но на мелких экранах видна слишком маленькая часть картинки, и это проблема
|
Код ваш покажите, или кусок кода, где применяете.
|
var width = image.offsetWidth,
height = image.offsetHeight;
image.style[width > height ? 'height' : 'width'] = '100%';
|
Цитата:
<script type="text/javascript">
var i , t,
b;
var speed = 6000
var Pic = ['image/img_1.jpg',
'image/img_2.jpg',
'image/img_3.jpg',
'image/img_4.jpg']
var j = 0
var p = Pic.length
for (i = 0; i < p; i++){
var preLoad = new Image()
preLoad.src = Pic[i]
Pic[i] = preLoad
}
function get(a) {
var c = document,
d = c.body,
e = c.documentElement,
f = "client" + a;
a = "scroll" + a;
return c.compatMode === "CSS1Compat" ? Math.max(e[f], e[a]) : Math.max(d[f], d[a])
}
window.onload = fon;
i = new Image;
function fon() {
window.clearTimeout(t);
j++
j %= p
i.src = Pic[j].src;
i.style.position = "absolute";
i.style.left = "0px";
i.style.top = "0px";
i.style.height = get("Height") + "px";
i.style.zIndex = -999;
i.id="img"
document.body.appendChild(i)
t = setTimeout(fon, speed)
}
window.onresize = function () {
var i = document.getElementById("img");
if(i) document.body.removeChild(i);
window.clearTimeout(b);
b = window.setTimeout(function () {
fon()
}, 20)
};
</script>
|
и плюс я в css задаю параметры img
#img {
min-height:100%;
min-width:100%;
vertical-align:middle
}
|
Для информации ... http://javascript.ru/forum/dom-windo...nie-fonom.html
Код написанный выше иммитирует Цитата:
Задача как я понимаю у тс -- сделать изменяющийся фон, проблема в пропорциях и весе картинок. |
нет-нет, задача - код, который любую по пропорциям картинку корректно сделает фоном. То есть либо ширину, либо высоту сделает 100%, остальное без искажения оставит как есть и обрежет.
то, что картинки меняются к этому коду отношения не имеет. Смена работает, там все ок. Но мне нужно прописать этот код именно в скрипт, меняющий картинки, поэтому я его и кинула. |
Цитата:
|
мм. ясно. спасибо! сейчас попробую)
|
Цитата:
|
Стоп, все не так.
min-width: 100%; min-height: 100%; Этот код ведь не должен нарушать пропорции. |
по идее да, но почему-то они нарушаются
|
бр, я запуталась.
Смотрите, этот код, который задает минимум - 100% - он не нарушает пропорций, но его недостаток в том, что при просмотре на экранах с мелким разрешением фон сильно вылезает за рамки экрана, получается не комильфо В идеальном мире или ширина, или высота должна быть именно 100%, а вторая величина больше 100%. как-то так |
Так если изображение меньше размера, то оно же получается растягивается, хоть и пропорционально, но больше чем на 100%. Разве нет?
|
да, а если экран меньше изображения, то оно вылезает за границы. А должно скукоживаться
|
Ahterknica,
либо с боков или внизу вверху будут отступы - если сохранять пропорции. |
рони, да, только я хочу, чтоб они обрезались, а не были белыми полосками.
|
мне кажется, это довольно типичная ситуация, разве нет?)
|
так сейчас то на каком этапе? изображение растягивается но не скукоживается при маленьком экране?
зафигачь вообще картинку в табличку, на весь экран и в стили добавь table-layout:fixed; о_О |
нет-нет.
смысл мне её класть в таблицу? в общем, это дело выглядит так: http://46.17.45.45/~knica119/index.html если смотреть на мониторе с маленьким разрешением, будет некрасиво, с большим - все ок |
Такая там жесть при изменении размеров окна О_О
|
Цитата:
Нужно сравнивать размеры картинки с размером экрана, и в зависимости от результата выставлять либо width либо height - 100% Короче,
if (window.innerHeight < image.offsetHeight || window.innerWidth < image.offsetWidth) {
image.style[image.offsetHeight > image.offsetWidth ? 'height' : 'width'] = '100%';
}
|
хотя когда уже подгружается полосочка, то все красиво
|
О да, кажется, это то, что нужно!
|
Цитата:
|
Цитата:
я вставила этот код вот так, в мой код, меняющий картинки:
var i , t,
b;
var speed = 6000
var Pic = ['image/img_1.jpg',
'image/img_2.jpg',
'image/img_3.jpg',
'image/img_4.jpg']
var j = 0
var p = Pic.length
for (i = 0; i < p; i++){
var preLoad = new Image()
preLoad.src = Pic[i]
Pic[i] = preLoad
}
function get(a) {
var c = document,
d = c.body,
e = c.documentElement,
f = "client" + a;
a = "scroll" + a;
return c.compatMode === "CSS1Compat" ? Math.max(e[f], e[a]) : Math.max(d[f], d[a])
}
window.onload = fon;
i = new Image;
function fon() {
window.clearTimeout(t);
j++
j %= p
i.src = Pic[j].src;
i.style.position = "absolute";
i.style.left = "0px";
i.style.top = "0px";
i.style.zIndex = -999;
i.id="img"
document.body.appendChild(i)
t = setTimeout(fon, speed)
}
if (window.innerHeight < image.offsetHeight || window.innerWidth < image.offsetWidth) {
i.style[i.offsetHeight > i.offsetWidth ? 'height' : 'width'] = '100%';
}
window.onresize = function () {
var i = document.getElementById("img");
if(i) document.body.removeChild(i);
window.clearTimeout(b);
b = window.setTimeout(function () {
fon()
}, 20)
};
|
| Часовой пояс GMT +3, время: 19:36. |