Как отцентровать изображение?

Question

[NeTLeaDeR]

Всем привет. Есть такой код:

<div class="project first-project">
    <img src="assets/img/project1.png" alt="" class="project__img">
    <img src="assets/img/project-title_bg.png" alt="" class="project__title-bg">
    <span class="project__title">ЗАГОЛОВОК</span>
</div>

img (class="project__img") по размеру больше, чем div. Какие свойства задать img, чтобы центр изображения совпал с центром div'a?

Answer 1

[ⓒⓢⓢ]

// псевдокод
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);

Answer 2

[Eugene Chefranov]

.project.first-project img {max-width: 100%; text-align: center;}

если правильно вас понял

Comments

[NeTLeaDeR]

Не-много неправильно выразился. Нужно не изменяя размера картинки это сделать, чтобы часть выходящая за пределы блока пропадала (использую overflow:hidden;). (Т.е. если картинка 1000х1000, а див 100x100, чтобы было видно только квадрат 100x100 от всего изображения, но этот квадрат должен быть центральным)

[Eugene Chefranov]

NeTLeaDeR, тогда так

.first-project {position:relative;}
.first-project .project__img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}