Центр изображения внутри div. Горизонтально и вертикально

Question

Я думаю, что этот вопрос задавали много раз, но я целый день искал в Интернете и не могу найти ни одного хорошего решения. Я хочу центрировать изображение внутри div так, чтобы оно выглядело как рамка. У меня есть изображения разных размеров, некоторые - портрет, некоторый пейзаж. Я хочу, чтобы они были центрированы по горизонтали и вертикали и что он не переполняет контейнер, если размер больше. Теперь я читал о дизайне div vs table, но серьезно, прямо сейчас я просто хочу, чтобы работа была выполнена, поэтому любое решение было бы очень благодарно.

Answer 1

Проверьте демо - http://jsfiddle.net/x6jDu/

стол-клетка имеет IE8 + поддержка

Answer 2

Вы можете достичь его, нажав на демонстрационную ссылку:

DEMOhttp://jsfiddle.net/rathoreahsan/99BXT/

ПРИМЕЧАНИЕ:

1. Против: Использование display:table-cell не будет работать ниже браузеров Internet Explorer 8, за исключением остальных браузеров. Плюсы: Он будет работать также с использованием фиксированной ширины и фиксированной высоты.

2. Плюсы: Использование display:block будет работать на всех браузерах. Против Не работает, используя фиксированную ширину и фиксированную высоту. Но вы можете управлять им с таким же padding для (сверху, справа, снизу, слева), как указано в этом примере