Как центрировать изображение, которое больше, чем окно браузера (а не фоновое изображение)

Как я могу центрировать большое изображение в окне браузера, чтобы, если он шире окна, он все равно будет центрирован?

Я не хотел просто сделать изображение фоновым изображением, так как оно динамически изменяется на изображения разных размеров, и я хочу, чтобы прокручивать вниз, чтобы увидеть их на правильной высоте.

Однако я открыт для создания фонового изображения, если высота контейнера div может меняться в зависимости от высоты фонового изображения?

Я не против иметь горизонтальную полосу прокрутки, но предпочел бы не делать этого.

Спасибо!

Ответы

Ответ 1

<div style="background:url(/path/to/image.png) center top; width:100%; overflow:hidden">
  <img src="/path/to/image.png" style="visibility: hidden;">
</div>

Это... возможно, приведет вас туда, где вы хотите.

и пример: fiddle и источник

Изменить

исправлено: fiddle и источник

Ответ 2

Почти два года спустя у меня была аналогичная проблема и я решил решить ее только с помощью html/css (используя только javascript для изменения изображений).

Наконец, мне пришлось разрешить в общей сложности три элемента для достижения всегда центрированных изображений (изображения как меньше, так и больше, чем элемент страницы/обертки).

Конструкция html

<div class="container">
    <div class="align"><img src="http://thecustomizewindows.com/wp-content/uploads/2011/11/bulb-wallpaper.jpg" /></div>
</div>

css:

div.container
{
    position: relative;
    width: 100%;
    overflow: hidden;
}
div.container div.align
{
    position: relative;
    width: 10000px;
    left: 50%;
    margin: 0 0 0 -5000px;
    text-align: center;
}

В то время как мне не очень нравится работать с безумно растянутыми элементами, это кажется очень эффективным.

Здесь скрипка: http://jsfiddle.net/NjJ3G/3/

Ответ 3

Честно говоря, лучший способ сделать это - фоновое изображение. Поскольку вы собираетесь использовать javascript для изменения изображения, вы можете пойти дальше и добавить немного больше, чтобы изменить высоту. Для этого загрузите изображение в невидимый div (style="position:absolute; top:-3000px; left:-3000px;") в дополнение к установке его в качестве фонового изображения. Затем вы можете использовать javascript для получения высоты от тега img внутри невидимого div.

Ответ 4

Лучшее решение с тегом img неизвестных измерений:

.bg-fluid {
    position:absolute;
    left:-1000%;right:-1000%; // horizontal center
    top:-1000%; bottom:-1000%; // vertical center
    margin: auto;
}

вы также можете сделать его отзывчивым:

.bg-fluid-responsive {
    min-width: 100%;
    min-height: 100%;
}

и тег img:

<img class="bg-fluid bg-fluid-responsive" src"..."/>

нет необходимости в контейнерах.

Примечание: сохраняется соотношение сторон .