центр изображения по горизонтали и по вертикали на странице с полями% и быть изменяемым с окном

Question

казалось так просто только день назад, но я не могу понять:

Как отцентрировать изображение на странице, при условии, что он зафиксировал% поля (10% со всех сторон) и все еще имеет масштаб с окном при изменении размера?

Очень важно, чтобы страница и изображение отображались на всех платформах без скроллеров (!). Сама страница очень проста и содержит только изображение (которое на разных версиях страницы имеет разные размеры) и верхнюю панель с ссылкой для отправки на другую страницу.

Максимальный размер изображения будет 1500x1000px, минимальный размер.

Я искренне надеюсь, что кто-то может помочь мне с этим, спасибо огромное!

Answer 1

Лучший способ сделать это с помощью JavaScript. Получите размер окна, подпишитесь на событие window.onresize и соответствующим образом измените размер и положение изображения.

Использование CSS только НЕ будет работать, поскольку любые свойства позиции зависят от контейнера. В вашем случае контейнер представляет собой окно, которое будет определять размер на основе содержимого. Это создает своего рода циклическую зависимость (размер окна зависит от изображения, размер и положение изображения зависят от размера окна).

Для получения информации о получении точного размера окна в кросс-браузере вы можете проверить это сообщение: Get the size of the screen, current web page and browser window - не сделали этого через некоторое время, чтобы предоставить вам точный код.

Также обратите внимание, что вы не упомянули сохранение пропорций изображения. Если он не должен поддерживаться, нет никакого способа сделать это только HTML/CSS, потому что все операции с ними поддерживают AR изображений.