Я пытаюсь создать простую слайд-шоу изображения, установленного в и фоном div. У меня нет проблем с созданием кода слайд-шоу, но у меня проблема с позиционированием изображения, которое должно меняться в соответствии с шириной разрешения других мониторов.JavaScript и CSS позиционирование изображения для любого разрешения
На рисунке ниже я описал, хочу ли я разместить изображение. Изображение должно быть помещено в красный div.
Вот образ, который я хочу поставить в красный DIV, чтобы быть похожим на фоне. Разрешение (1900px х 500px)
Вот модель, что я сумел сделать. Я попытался в java-скриптовом коде объявить глобальную переменную sw, которую я присвоил window.innerWidth (sw=window.innerWidth), после чего в CSS с использованием jquery, выбрав красный div $('#rotator') и присвоенный sw ($('#rotator').css('width', sw)), но результат не был тем, что мне нужно получить , Я получил изображение, которое было обрезано справа в соответствии с разрешением экрана. 
Если кто-то знает, как решить этот вопрос, я буду признателен!
Вот мои КОДЫ:
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="jquery-2.1.0.js"></script>
<script type="text/javascript" src="function.js"></script>
<script src="jquery.easing.1.3.js"></script>
</head>
<body >
<div id="rotator"></div>
<div class='slider'></div>
</body>
</html>
CSS
body{
margin: 0px;
margin-left: 0px;
}
.slider{
width: 940px;
height: 360px;
background-color: #FFDF00;
margin: 0 auto;
position: absolute;
left: 15%;
top: 20px;
}
#rotator {
position: relative;
height: 500px;
}
.puzzle {
width: 100px;
height: 100px;
background-position: -100px 0px;
float: left;
}
И JavaScript, который также содержит функцию слайд-шоу эффект (который работает).
$(document).ready(init)
sw=window.innerWidth;
if (sw % 100 == 0) {
sw=window.innerWidth
}
else{
sw=Math.floor(sw/100)*100
}
//counter of slider
current_slide=0;
image_list=new Array
(
"img/1.jpg",
"img/2.jpg",
"img/3.jpg",
"img/4.jpg",
"img/5.jpg"
);
function init()
{
$('#rotator').css('width', sw)
change(image_list[current_slide]);
//start timer
setInterval( "change(image_list[current_slide])" ,2500);
}
function change(bg_image){
// this function creats cells inside <div id = 'rotator'>
rot = $('#rotator'); //constructor
rot.empty();
for(y = 1; y<=5; y++)
{
for(x = 1; x<=sw/100; x++)
{
rot.append('<div class = "puzzle p-' + x + '-' + y + ' "></div>');
//select the <div> using his class and setting up the cells coordinates
$('.p-' + x + '-' + y).css('background-position', (-(x-1)*100) + 'px ' + (- (y-1)*100) + 'px').css('background-image','url('+bg_image+')');
$('.p-' + x + '-' + y).css('opacity', 0).delay(parseInt(Math.random()*1000)).animate({opacity: 1}, {duration: 1000})
}
}
current_slide++;
if(current_slide >= image_list.length)current_slide=0
}
Спасибо за ваше время и внимание!
Что именно ваш вопрос? С такой информацией сложно сказать. – Jasper
Что вам нравится делать? Вы хотите разместить свое изображение в верхней части всех других элементов? –
Проблема в том, что фоновое изображение, которое с оружием, не изменяет размер, оно просто обрезается справа в соответствии с шириной экрана. – Chris