Как разместить изображение в контейнере div?

Question

У меня есть изображение <img> in <div> контейнер.

<div id="container"> 
    <img id="image" /> 
</div> 

Изображения могут быть разных размеров и размер контейнера является фиксированным . Я хочу разместить изображение полностью в контейнере, в центре, без растяжки и без использования этого изображения как css background of <div>, поскольку большинство предложений по переполнению стека предполагает. Here is the js fiddle того, что я уже пробовал.

Answer 1

Попробуйте это:

.container { 
    margin: 20px; 

    width: 100px; 
    height: 120px; 
    position:relative; 
    border: 1px solid red; 
} 

.container img { 
    max-width:100%; 
    max-height:100%; 
    position:absolute; 
    top:50%; 
    left: 50%; 
    transform: translateY(-50%) translateX(-50%); 
} 

Вот jsfiddle

Answer 2

Вы можете сделать:

.container { 
    margin: 20px; 
    width: 100px; 
    height: 120px; 
    text-align:center; 
    border: 1px solid red;  
} 

.container img { 
    width:auto; 
    max-width: 100%; 
    height: auto; 
    max-height: 100%; 
    position: relative; 
    top: 50%; 
    transform: translateY(-50%); 
} 

Я сделал вам working fiddle example с вашим кодом.

Answer 3

Я согласен с imnancysun. Однако вы должны добавить префиксы поставщика, чтобы убедиться, что css будет работать с большим количеством браузеров. Я бы предположил:

.container { 
    margin: 20px; 
    width: 100px; 
    height: 120px; 
    position:relative; 
    border: 1px solid red; 
} 

.container img { 
    max-width:100%; 
    max-height:100%; 
    position:absolute; 
    top:50%; 
    left: 50%; 
    -webkit-transform: translateY(-50%) translateX(-50%); 
     -ms-transform: translateY(-50%) translateX(-50%); 
      transform: translateY(-50%) translateX(-50%); 
} 

Я использую firefox большую часть времени. Без префиксов все изображения, расположенные вне div.

This - отличный инструмент, который поможет добавить префикс поставщика к вашему CSS.