Javascript 调整幻灯片大小以填充屏幕

我正在建立一个自动幻灯片摄影网站

我正试图使幻灯片调整大小，以适应浏览器，使其填充屏幕，使其上方或下方不留空白。如果屏幕与图像的比例不正确，我还需要它来放大图像（这样，如果用户在iphone等设备上，图像仍然会正确地填充屏幕）

请查看示例。请注意，如果将屏幕旋转90度，则图像将缩放并保持居中，以仍然填充屏幕

这就是我目前拥有的（如果我必须的话，我会改变幻灯片放映的方法）

HTML+JavaScript（头部）

提前谢谢，如果这是一个措词不当或没有意义的问题，请道歉

---

Kieran

不要将div设置为绝对值，将img设置为绝对值。这就是你的错误所在。
同时将图像设置为100%，这样可以占据整个屏幕

CSS:

body{
 padding:0;//so that there is no white space
 margin:0;
}
#slideshow {
    display:block; 
    position: relative; 
    width: 100%; 
}
#slideshow > div > img{
    display:block;
    width:100%;
    max-width:100%;
    position:absolute; // here make it absolute 
}
#slideshow > div { 
 position:relative; // make it relative not necessary actually
}

---

啊，这很有道理，谢谢你澄清：）

#slideshow { 

    position: relative; 

    width: 100%; 

}

#slideshow > div { 

    position: absolute; 

}

body{
 padding:0;//so that there is no white space
 margin:0;
}
#slideshow {
    display:block; 
    position: relative; 
    width: 100%; 
}
#slideshow > div > img{
    display:block;
    width:100%;
    max-width:100%;
    position:absolute; // here make it absolute 
}
#slideshow > div { 
 position:relative; // make it relative not necessary actually
}