Изображение выплывает из экрана

Question

Мне нужно выровнять изображение по центру окна браузера, поэтому я создал следующую CSS:

@charset "utf-8";
/* CSS Document */
html {
    background-color:#CCCCCC;
}
body {
    margin:0px 0px 0px 0px;
}
img {
    position:absolute;
    border:0px;
    left:50%;
    top:50%;
    margin-left:-156px;
    margin-top:-217px;
}

Однако проблема в том, что если вы сделаете окно браузера очень маленьким, изображение всплывает вверх и влево. Вместо этого он должен быть зафиксирован в верхнем левом углу, а затем дать возможность прокрутки, чтобы увидеть оставшуюся часть изображения.

Просмотреть проблему здесь: ejlstrup.com

Answer 1

Попробуйте следующее css:

img {
    border: 0px;
    margin: auto auto;
}

Проблема будет в ваших отрицательных полях, именно они заставляют изображение выталкивать влево из поля зрения. Если вы используете margin: auto auto, он должен центрировать изображение для вас, и вам не придется использовать абсолютное позиционирование с процентами.

Редактировать: только что проверил мой метод, и он не работал как задумано. То, что вы можете сделать тогда (если вы не возражаете против использования div), это обернуть изображение в div. Сделайте div размером с изображение, тогда margin: auto auto; будет работать правильно.

Edit2: Кредиты Senthil за то, что они указали, что если вы установите свойство display для изображения на block, вам не нужно будет оборачивать изображение в div для его центрирования Тем не менее, auto не работает для центрирования div по вертикали, если требуется центрирование, вы можете использовать процент (хотя я не уверен, что это может вызвать проблемы с разными разрешениями).

img {
    border: 0px;
    margin: auto;
    display: block;
}