Как центрировать изображение по ширине/высоте родителя?

Question

[Саша]

Здравствуйте, подскажите пожалуйста, какие способы центровки картинки с разной высотой/шириной в родителе с явно заданными размерами вам известны?

Плагины не предлагать, объемные функции тоже.

Спасибо.

upd:
Картинка может иметь ширину больше ширины родителя и при этом она не должна обрезаться.

Answer 1

[Андрей Гончаров]

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

Comments

[Максим Тимофеев]

железный вариант, только добавлю, что родителю надо указать position:relative;

[Андрей Гончаров]

Максим Тимофеев: верно. Правда в случае если картинка больше родителя не подойдет. Но вроде задача так не стояла.

[Максим Тимофеев]

Андрей Гончаров: Если картинка больше родителя, тогда надо юзать calc и top: 50%; left: 50%;

[Андрей Гончаров]

Максим Тимофеев: в таком случае делаю left,top 50% и transform: trnaslate(-50%,-50%);

[Саша]

Максим Тимофеев: Андрей Гончаров:
Ребят, картинка может иметь ширину даже 5000, то есть может быть больше родителя и она не должна обрезаться.

[Саша]

Андрей Гончаров: Максим Тимофеев:
Я центрировал через абсолют вот так, но может бажить, давно использовал данный метод.

img{
	position:absolute;
	top:20px;
	left:20px;
	right:20px;
	bottom:20px;
	max-height:90%;
	height:auto;
	max-width:90%;
	width:auto;
	margin:auto;
}

[Максим Тимофеев]

Саша: Это будет центрировать, только если блок имеет ширину и высоту по 200px. Причем margin:auto; в данном случае не нужен, я бы даже обнулил

[Саша]

Максим Тимофеев: да, на родителе должны быть явно заданные размеры или он так же должен позиционироваться как fixed.

Причем margin:auto; в данном случае не нужен, я бы даже обнулил

Почему не нужен? А как центрировать?

[Максим Тимофеев]

Саша: В Вашем варианте он четко вписан в родителя, там маргинов не остается.

Answer 2

[Xandrio]

Я так понимаю что картинки у тебя разного размера? а блок для картинок фиксированный?!
И чтобы пропорции сохранять?

Сделай картинку бекграундом, и поставь ему background-size: cover;
он тебе будет сам всю работу делать.

А если надо конкретно img центровать - то эт не очень просто, я писал не маленькую функцию на js.

Comments

[Саша]

Xandrio:
Только не background-size: cover; а background-size:contain;
Хороший вариант))

[Xandrio]

Саша: точно - contain :)
привык просто к cover больше, почему-то )

пасиб )

[Саша]

Xandrio: потому что больше используем его, чем contain ))

И вам)

Answer 3

[Сергей Протько]

Flexbox-ы, просто, эффективно, на css, без разницы знаете ли вы размеры блока или нет...

Comments

[Саша]

Сергей Протько :
В примере речь же не о картинках идет, я не нашел решения не флэксбоксе, пытался сделать сам, так же не получилось.

[Сергей Протько]

Саша: ну тогда самый простой вариант - background-image.

Answer 4

[Ivan Tokar]

Если я правильно понял ваш вопрос то просто дайте картинке max-width: 100%, по горизонтали можете сентрировать ее или text-align: center в родителе или margin: 0 auto, а если вам надо и по вертикали то посмотрите тут