Выравнивание изображения в центре внутри меньшего div

У меня есть div с width:100px и height:100px (скажем). Внутри этого есть только изображение, для которого высота всегда фиксируется на 100px.

Я хочу сделать изображение горизонтально центром.

Здесь есть 3 случая:

ширина изображения равна ширине div, без проблем
ширина изображения меньше ширины div, я могу использовать margin: auto здесь
ширина изображения больше, чем ширина div

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

означает, что если ширина изображения равна 120px а ширина div равна 100px и overflow:hidden Я хочу, чтобы изображение было 10-й px до 110th px, чтобы быть видимым (так, left: 10px и right: 10px изображения скрыты под div)

Возможно ли это с помощью какого-либо свойства CSS? (Я не знаю ширины изображения, которое загружается, поэтому я хочу, чтобы оно было динамичным. Также нужно избегать вычислений со стороны javascript, чтобы найти дополнительное количество ширины и дать margin-left: -ve value bla bla..)

Кроме того, я не могу дать изображение в качестве background-image для div!

Ответ 1

Смотрите: http://jsfiddle.net/thirtydot/x62nV/ (и без overflow: hidden, чтобы легко увидеть центрирование)

Это будет работать во всех браузерах, за исключением IE6.

Для .imageContainer > span, margin-left выводится из width, а width - это произвольное число, которое контролирует максимальную ширину изображения, которая будет поддерживаться. Вы можете установить width: 10000px; margin-left: -4950px; для поддержки действительно широких изображений, если это необходимо.

HTML:

<div class="imageContainer">
    <span><img src="http://dummyimage.com/100x100/f0f/fff" /></span>
</div>

CSS

.imageContainer {
    border: 1px solid #444;
    overflow: hidden;
    width: 100px;
    height: 100px;
    margin: 15px;
    text-align: center;
}
.imageContainer > span {
    display: block;
    width: 1000px;
    margin-left: -450px; /* -(width-container width)/2 */
}
.imageContainer > span > img {
    display: inline-block;
}