根据浏览器大小改变大小的居中图像

Question

I have a website，我需要适应不同的屏幕尺寸。大部分都很简单，但我有一个幻灯片，它需要根据屏幕大小调整大小，并使图像在页面居中。图像比页面更宽，因此当大小改变时，两侧不会有空白。

全尺寸图片的宽度是4800px，但这会随着浏览器的大小而变化。

如果只有一种尺寸的图像居中的问题，我会使用

#image{left:50%, margin-left:2400px;}

但由于我根据可用的空间调整图片的大小，所以我可以随时显示图片的完整高度，因此显示的图像的宽度会发生变化，这种居中的方法是不好的。

那么，我如何使用javascript来检查当前的图像宽度和更改空白区-left属性，或者这可以在css中完成吗？

编辑以在此处添加一些css：

这个小工具根据浏览器/屏幕的大小调整图像的大小，使其适合可用空间的高度。但是中心位置丢失了。

#slideshow{
max-height:100%;
width:auto;
background-color: blue;
overflow: hidden;
text-align: center;
z-index:5;}

.size-4{
max-height:100%;
width:auto;}

Answer 1

你可以做一张桌子。空间-图像-空间

空格必须是<td width="50% height="100%"> The image `

这就是我在我的网站中处理它的方式