Задать вопрос
goldmayor
@goldmayor
html

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

Добрый день, у меня возник вопрос. Имеется блок 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;
}
  • Вопрос задан
  • 49822 просмотра
Комментировать
Подписаться 3 Оценить Комментировать
Решения вопроса 2
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Держите https://jsfiddle.net/Lm5yycxz/
Ответ написан
Комментировать
Комментировать
Deeepi
@Deeepi 
article .img_preview img {
  width: 100%; height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  object-position: center;
}
Ответ написан
Комментировать
Комментировать
Пригласить эксперта
Ответы на вопрос 4
@shure348
если блок "определенных размеров", т е есть 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;
}
Ответ написан
Комментировать
Комментировать
@alexmixaylov
у блоку Див
прописать text-align:center
если нужно только горизонтальное выравнивание
если нужно и вертикальное. тогда картинку нужно вложить еще в один блок(например wrap-img)
и ему(wrap-img) прописать
display: table-cell;
vertical-align: middle;
а его родителю
display: table;
Ответ написан
1 комментарий
1 комментарий
aliencash
@aliencash
Партизан
Картинка должна быть задана как фон:
div {
  background-image: url('../img/pic.jpg');
  background-position: center center;
}
Ответ написан
3 комментария
3 комментария
@diller
https://jsfiddle.net/promonj/7bmj8tk0/10/ - Самая лучшая реализация по моему
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
Frontend-разработчик (React)
ДАЛЕЕ
от 130 000 ₽
Тестировщик-стажёр
ITooLabs • Тула
от 35 000 до 40 000 ₽
Fullstack PHP Developer
Smapse Education
от 40 000 до 65 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Очистка ин.текста с изображения и создание обложки+корешка для книги
19 апр. 2024, в 15:34
14000 руб./за проект
Разработать фронтенд для интернет-магазина на фреймворке TS
19 апр. 2024, в 15:33
60000 руб./за проект
Спроектировать дизайн сводной SEO таблицы
19 апр. 2024, в 15:20
5000 руб./за проект
Ещё заказы