Как центрировать изображение, которое шире окна браузера (не фоновое изображение) - PullRequest
Новая
       20

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

12 голосов
/ 29 июля 2011

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

См .: http://carolineelisa.com/rob/

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

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

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

Спасибо!

Ответы [ 4 ]

17 голосов
/ 29 июля 2011 
<div style="background:url(/path/to/image.png) center top; width:100%; overflow:hidden">
  <img src="/path/to/image.png" style="visibility: hidden;">
</div>

Это ... вероятно, доставит вас туда, куда вы хотите.

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

Редактировать

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

10 голосов
/ 14 июля 2013

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

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

Конструкция 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/

2 голосов
/ 13 января 2016

Лучшее решение с тегом 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"..."/>

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

примечание: соотношение сторон будет сохранено.

2 голосов
/ 29 июля 2011

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

...