Центральное изображение, которое меняет размер в зависимости от размера браузера

Question

У меня есть веб-сайт, который мне нужен, чтобы соответствовать разным размерам экрана. Большая часть этого довольно проста, но у меня есть слайд-шоу, в котором необходимо изменить размер экрана и центрировать изображение на странице. Изображения шире, чем страница, чтобы с обеих сторон не было пробелов при изменении размера.

Полноразмерное изображение имеет ширину 4800 пикселей, но это зависит от размера браузера.

Если бы речь шла о центрировании изображения только в одном размере, я бы использовал

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

Но поскольку я изменяю размер изображения в соответствии с доступным пространством, поэтому я могу постоянно показывать полную высоту изображения, ширина отображаемого изображения изменяется, и этот метод центрирования не годится.

Итак, как я могу использовать javascript, чтобы проверить текущую ширину изображения и изменить свойство margin-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

Вы можете сделать таблицу. [Space]-[Image]-[Space]

Пробелы должны быть <td width="50% height="100%"> Изображение `

Вот как я справляюсь с этим на своих сайтах