Как отцентрировать изображение по размеру блока, не сжимая или растягивая его?

Question

[Руслан Магомедов]

Знаю как сделать это методом - background: url(...) center center no-repeat, но можно ли сделать тоже самое с <img src="..">?

Answer 1

[Uwe_Boll]

гугли адаптивные изображения

Answer 2

[Stalker_RED]

.container {
 position: relative;
}
.container img {
  position: absolute;
  top: 0; bottom:0; left: 0; right:0;
  margin: auto;  
}

Демо: https://jsfiddle.net/818j7ns1/

Answer 3

[Михаил Паутов]

<div class="block">
  <img src="https://api.fnkr.net/testimg/350x200/00CED1/FFF/?text=img+placeholder">
</div>
.block {
  width: 500px;
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

codepen.io/anon/pen/jWEGqY
Поверь этот вариант самый лучший)))

Comments

[Сергей Вирченко]

он не кроссбраузерный

[Михаил Паутов]

Сергей Вирченко: ну как бы да, но щяс уже мало кто на это обращает внимание. Хотя про это можно долго спорить (я промолчу)

Answer 4

[Сергей Вирченко]

если блок определенного размера, а картинка динамическая и размер ее не известен, то обычно я делаю так:

<div class="table">
     <div class="table-cell">
           <img src="">
     </div>
</div>

.table{
     display: table;
     width: 500px; 
     height: 500px;
}
.table-cell{
    display: table-cell;
    vertical-align: middle;
}
.table-cell img{
    display: block;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100%;
}