Центрирование изображения в блоке

@NeTLeaDeR · Регистрация: 08.04.2015

Author24 — интернет-сервис помощи студентам

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

HTML5

<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?

@6elka1703 · 09.08.2018, 15:59

NeTLeaDeR, попробуй это

CSS

.project__img{
  width: 100%; 
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@NeTLeaDeR · 09.08.2018, 16:19 **[ТС]**

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

Добавлено через 7 минут
Решено: .first-project {position:relative;}
.first-project .project__img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}

@NeTLeaDeR 0 / 0 / 0 Регистрация: 08.04.2015 Сообщений: 150
	09.08.2018, 16:19 [ТС]	3
	Это немного не то, наверное я не-правильно выразился. Нужно не изменяя размера картинки это сделать, чтобы часть выходящая за пределы блока пропадала (использую overflow:hidden; ). (Т.е. если картинка 1000х1000, а див 100x100, чтобы было видно только квадрат 100x100 от всего изображения, но этот квадрат должен быть центральным) Добавлено через 7 минут Решено: .first-project {position:relative;} .first-project .project__img {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} 0