JavaScript和CSS定位任何分辨率的图像
我正在尝试创建一个简单的幻灯片，其中的图像是在和背景div中设置的。我在创建幻灯片代码方面没有问题，但我在定位图像时遇到了问题，该图像应根据其他显示器的分辨率的宽度进行更改 在下面我描述的图片中，我想放置图片。图像应置于红色分区中 这是我想放在红色div中作为背景的图像。分辨率为（1900px 500px） 这是我设法做的一个模型。我尝试在java脚本代码中声明一个全局变量JavaScript和CSS定位任何分辨率的图像,javascript,jquery,html,css,image,Javascript,Jquery,Html,Css,Image,我正在尝试创建一个简单的幻灯片，其中的图像是在和背景div中设置的。我在创建幻灯片代码方面没有问题，但我在定位图像时遇到了问题，该图像应根据其他显示器的分辨率的宽度进行更改 在下面我描述的图片中，我想放置图片。图像应置于红色分区中 这是我想放在红色div中作为背景的图像。分辨率为（1900px 500px） 这是我设法做的一个模型。我尝试在java脚本代码中声明一个全局变量sw，我将该变量分配给window.innerWidth（sw=window.innerWidth），然后在CSS中使用
swwindow.innerWidthsw=window.innerWidth$（'#rotator'）sw$（'#rotator'）.CSS（'width'，sw$（文档）.ready（初始化）
sw=窗宽；
如果（sw%100==0）{
sw=窗宽
}
否则{
sw=数学楼层（sw/100）*100
}
//滑块计数器
当前滑动=0；
image\u list=新数组
(
“img/1.jpg”，
“img/2.jpg”，
“img/3.jpg”，
“img/4.jpg”，
“img/5.jpg”
);
函数init（）
{
$（'#rotator'）.css（'width'，sw）
更改（图像列表[当前幻灯片]）；
//启动计时器
设置间隔（“更改（图像列表[当前幻灯片]”），2500；
}
功能更改（bg_图像）{
//此功能在内部创建细胞
rot=$（'#rotator'）；//构造函数
腐烂。空（）；
对于（y=1；y=image\u list.length）当前幻灯片=0
}
感谢您的时间和考虑 您要么将图像放入一个容器div，容器div的宽度与页面大小成动态关系，并将其中图像的宽度设置为100%，要么使用CSS属性
background size:cover（仅与较新浏览器兼容）
设置为div背景图像的图像只需填充其容器，并在其收缩超过背景图像的尺寸时被该容器剪裁，除非background size:cover被使用。为了在较旧的浏览器中获得相同的效果，使用了前面提到的100%技巧
跨浏览器样式：
新学校（ish）-学校：
您要么将图像放入一个容器div，容器div的宽度随页面大小而变化，并将其中图像的宽度设置为100%，要么使用CSS属性background size:cover（仅与较新浏览器兼容）
设置为div背景图像的图像只需填充其容器，并在其收缩超过背景图像的尺寸时被该容器剪裁，除非background size:cover被使用。为了在较旧的浏览器中获得相同的效果，使用了前面提到的100%技巧
跨浏览器样式：
新学校（ish）-学校：
您的问题到底是什么？有这么多信息很难说。你喜欢做什么？你想把你的图像放在所有其他元素的顶部吗？问题是背景图像，带枪的图像，没有调整大小，只是根据屏幕的宽度从右侧裁剪。我想把带两枪的图像完全对称地放在黄色幻灯片的背面，还有根据屏幕的宽度调整大小。你到底有什么问题？有这么多信息很难说。你喜欢做什么？你想把你的图像放在所有其他元素的顶部吗？问题是背景图像，带枪的图像，没有调整大小，只是根据屏幕的宽度从右侧裁剪。我想把带两枪的图像完全对称地放在黄色幻灯片的背面，也可以根据屏幕的宽度调整大小。
<!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>
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;
}
$(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
}