Как отцентрировать изображение, которое больше экрана?

Question

У меня следующий код:

HTML

<div class="banner">
    <img src="banner.png">
</div>

CSS

.banner > img {
    margin: auto;
}

Изображение имеет ширину 3000 пикселей и высоту 200 пикселей. Я хочу, чтобы изображение располагалось по центру без горизонтальной полосы прокрутки. (Изменение размера браузера не должно вызвать проблем)

Я пытался дать .banner Div баннерное изображение как background-image, но тогда div не найдет его размер автоматически...

Как это возможно?

Answer 1

<div class="banner">
</div>

CSS:

.banner {
    background: url(http://ximg.es/3000x200/000/fff.png) no-repeat 50% 50%;
    height:200px;
}

как это: jsfiddle

Answer 2

Ваш лучший вариант - использовать изображения в качестве фона, но если вы хотите / должны использовать изображение, сделайте это так

.banner{overflow:hidden; height:200px; width:100%; text-align:center;}
.banner img{width:100%; height:100%; margin:0 auto;}

Answer 3

Как центрировать изображение в HTML и CSS и предотвратить горизонтальную полосу прокрутки?

1. Запретить горизонтальную полосу прокрутки:

Попробуйте, это будет работать отлично, добавьтеoverflow-xсвойство класса и установите его вhidden, что отключит горизонтальную полосу прокрутки в CSS. См. Как предотвратить горизонтальную прокрутку? - Переполнение стека .

2. Как центрировать изображение в CSS?

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

1. display: flex;.
2. justify-content: center;.

CSS-код:

      .banner {
    overflow-x:hidden;
    display: flex;
    justify-content: center;
}

HTML-код:

      <div class="banner">
    <img src="">
</div>