Ответ 1

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
    });
});

Посмотрите на jsFiddle: http://jsfiddle.net/4eYX9/30/

Ответ 2

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

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

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

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

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

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

Основной 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 */
}

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

Затем, используя вышеизложенное, также установите любой элемент wrap 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%; 
}

Ответ 3

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

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

Ответ 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, чтобы скрыть дополнительную область изображения.

Ответ 5

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

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

Ответ 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 background решение с видимым переполнением изображения:

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;
}

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

Ответ 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
        })
    }
})

Ответ 8

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

Ответ 9

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

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