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

Question

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

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

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

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

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

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

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

Также я не могу дать тон изображен как background-image для div!

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