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

Question

Обычно изображения центрируются с помощью display: block; margin: auto, но если изображение больше контейнера, оно переполняется вправо. Как мне сделать так, чтобы это было переполнено в обе стороны? Ширина контейнера фиксирована и известна. Ширина изображения неизвестна.

Answer 1

Чистое решение CSS

Требуется одна дополнительная оболочка (протестировано в FireFox, IE8, IE7):

Улучшенный ответ

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

Мы можем решить эту проблему, поместив inner вправо и затем отцентрировав от вправо.Это по-прежнему усекает img со страницы слева, но делает это, явно толкая его таким образом, а затем центрируя его обратно, комбинация которого предотвращает горизонтальную прокрутку extra право. Теперь мы получаем столько правильной прокрутки, сколько нам нужно, чтобы увидеть правую часть изображения.

Пример скрипки (Границы в скрипке предназначены только для демонстрации.)

Essential CSS

div.outer {
    width: 300px; /* some width amount needed */
    margin: 0 auto; 
    overflow: visible;
}
div.inner {
    position:relative;
    float: right; /* this was added and display removed */
    right: 50%;
}
div.inner img {
    position: relative; 
    right:-50%; /* this was changed from "left" in original */
}

Если вы хотите нет прокрутка вправо для широких изображений

Затем, используя вышеизложенное, также установите любой элемент обертки outer (, как body или третий обертка ), чтобы иметь overflow: hidden.

---

Оригинальная идея (для истории)

Пример скрипки (Границы в скрипке только для демонстрации.)

HTML

<div class="outer">
    <div class="inner">
        <img src="/yourimage.png">
    </div>
</div>

CSS

div.outer {
    width: 300px; /* some width amount needed */
    margin: 0 auto; 
    overflow: visible;
}
div.inner {
    display: inline-block; 
    position:relative; 
    right: -50%;
}
div.inner img {
    position: relative; 
    left:-50%; 
}

Answer 2

Вот двухстрочное решение CSS (для поддержки кросс-браузерной поддержки может потребоваться еще пара строк):

img {
    margin-left: 50%;
    transform: translateX(-50%);
}

Answer 3

HTML

​<div class="image-container">
  <img src="http://www.google.com/images/logo.gif" height="100" />
</div>​

CSS

.image-container {
    width: 150px;
    border: solid 1px red;
    margin:100px;
}

.image-container img {
    border: solid 1px green;
}

JQuery

$(".image-container>img").each(function(i, img) {
    $(img).css({
        position: "relative",
        left: ($(img).parent().width() - $(img).width()) / 2
    });
});

1022 *

См. На jsFiddle: http://jsfiddle.net/4eYX9/30/

Answer 4

Альтернативное чисто CSS-решение - использовать атрибут transform:

HTML:

<div class="outer">
    <img class="image" src="http://www.gstatic.com/webp/gallery/4.jpg" />
</div>

CSS:

.outer {
    position: relative;
    width: 100px;
    border: 1px solid black;
    height: 150px;
    margin-left: 100px; /* for demo */
    /* overflow: hidden; */
}

img.image {
    width: 200px;
    opacity: 0.7;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

Fiddle

Просто добавьте overflow:hidden к родителю div, чтобы скрыть дополнительную область изображения.

Answer 5

Лучше всего установить вместо него фоновое изображение контейнера.

#container {
    background: url('url/to/image.gif') no-repeat center top;
}

Answer 6

На самом деле существует простой способ чистого CSS / HTML (без большой горизонтальной прокрутки):

HTML :

<div class="outer">
  <img src="/my/sample/image.jpg">
</div>

Css :

Если вы не хотите видеть переполнение изображения

div.outer img {
    position: absolute;
    left: -50%;
    z-index:-1;
}
div.outer {
    overflow: hidden;
    position: relative;
    height: 200px;
}

С видимым переполнением изображения

div.outer img {
    position: absolute;
    left: -50%;
    z-index:-1;
}
div.outer {
    overflow: visible;
    position: relative;
    height: 200px;
}
body, html {
    overflow-x:hidden;
}

A фон решение с видимым переполнением изображения:

HTML :

<div class="outer">
  <div class="inner"></div>
</div>

Css :

div.outer {
    width: 100%;
    height: 200px;
}
div.inner {
    background: url('/assets/layout/bg.jpg') center no-repeat;
    position: absolute;
    left: 0;
    width: 100%;
    height: inherit;
}

при условии, что external находится в указанном контейнере ширины.

Answer 7

Я могу думать только о решении Javascript, так как вам нужно расположить изображение относительно отрицательного значения слева от его контейнера:

JQuery

$(document).ready(function(){

    var theImg = $('#container img');
    var theContainer = $('#container');
    if(theImg.width() > theContainer.width()){
        theImg.css({
            position: 'relative',
            left: (theContainer.width() - theImg.width()) / 2
        })
    }
})

Answer 8

Мне показалось, что это более элегантное решение, без изгиба, похожее на что-то выше, но более обобщенное (применяется как по вертикали, так и по горизонтали):

.wrapper {
    overflow: hidden;
}
.wrapper img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* height: 100%; */ /* optional */
}

Answer 9

Я не думаю, что есть чистое решение CSS (за исключением следующего ответа :)).Однако с Javascript было бы просто найти ширину изображения, вычесть ширину контейнера, разделив на два, и вы получите, как далеко от контейнера вам нужно.