|
Про картинку в качестве фона
Ребят, подскажите, можно ли задать такую зависимость:
есть картинка-фотография фоном. Я хочу, чтобы она занимала все окно, но не меняла пропорций при этом. Мне кажется, что самый удобный вариант будет таким: если картинка пропорционально длиннее, чем экран, то её кусок справа просто не отображается, как бы обрезается. и полоса прокрутки при это не появляется если картинка выше при стопроцентной ширине, то обрезается в высоту, опять же без прокрутки. Так делают? |
В общем, я даже нашла, что нужно получить.
Но не могу соединить. У меня есть такой код для страницы:
<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/
|
Тогда как твой вопрос связан с текущей темой ("Про картинку в качестве фона") ?
|
Конкретно темы только о прокрутке я не нашёл, перенаправьте пожалуйста и я там оставлю свой пост
сори что не в тему! Просто устал искать. |
| Часовой пояс GMT +3, время: 23:01. |
|