Как выровнять центр картинки по центру блока div?

Question

[Артем Пономарев]

Добрый день, у меня возник вопрос. Имеется блок div определенных размеров, как выровнять внутри картинку (центр изображения) по центру блока, что бы потом сделать hover эффект уменьшения картинки.

<article class="item">
     <div class="img_preview">
          <img src="images/img/3.jpg">
     </div>
</article>

article .img_preview {
    max-height: 500px;
    overflow: hidden;
    text-align: center;
}
article .img_preview img {
    display: table-cell;
    vertical-align: middle;
}

Answer 1

[Сергей delphinpro]

Держите https://jsfiddle.net/Lm5yycxz/

Answer 2

[Deeepi]

article .img_preview img {
  width: 100%; height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  object-position: center;
}

Answer 3

[Александр Алексеев]

если блок "определенных размеров", т е есть width и height то все просто

.block { width: 100px; height: 100px; position: relative;}
.block > img { 
max-width: 100%; 
max-height: 100%;
position: absolute;
z-index: 1;
margin: auto;
top: 0; right: 0; bottom: 0; left: 0;
}

Answer 4

[Александр]

у блоку Див
прописать text-align:center
если нужно только горизонтальное выравнивание
если нужно и вертикальное. тогда картинку нужно вложить еще в один блок(например wrap-img)
и ему(wrap-img) прописать
display: table-cell;
vertical-align: middle;
а его родителю
display: table;

Comments

[Артем Пономарев]

Не выходит

Answer 5

[Андрей Федоров]

Картинка должна быть задана как фон:

div {
  background-image: url('../img/pic.jpg');
  background-position: center center;
}

Comments

[Артем Пономарев]

Данное решение не подходит, т.к. у меня на сайте используются блоки с новостями и вложенными картинками

[Сергей delphinpro]

Артем Пономарев: фоновые изображения вполне можно прописывать в html в атрибуте style, так что это не аргумент.

[Андрей Федоров]

Артем Пономарев: Правильно заданный вопрос - половина ответа. (с)

Answer 6

[diller]

https://jsfiddle.net/promonj/7bmj8tk0/10/ - Самая лучшая реализация по моему