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

Question

[kirigosh]

Здравствуйте.Есть блок 160*160, в котором находится широкоформатное изображение 160*250.

<div id="minibox">
		<img src="img/1.jpg" class="box">
	</div>

.box {
	height:100%;
}

#minibox {
	overflow:hidden;
	width:160px;
	height:160px;
}

Это изображение выравнивается по левой стороне minibox, и скрываются оставшиеся 90px. Мне нужно, чтобы изображение выравнивалось по центру т.е. слева и справа пряталось по 45px, и в блоке я видел центр изображения. Я не знаю что делать... Подскажите, как быть?

P.S. параметры изображения (160*250) я дал для примера. На деле, у меня много широкоформатных изображений, имеющие разные параметры...

Answer 1

[Filipp Shcherbanich]

#minibox{text-align:center}

Comments

[Filipp Shcherbanich]

упс, не дочитал, ниже правильно написали, делаешь фоном, а там можно менять background-position

[kirigosh]

#minibox{text-align:center} не помогло

[Filipp Shcherbanich]

@kirigosh, да, я невнимательно прочитал вопрос, background-position Вам в помощь тут

Answer 2

[Юрий Лобанов]

Сделайте изображение фоном, самое простое решение.

Я бы предложил все же Вам поправить шаблон движка. Если настаиваете на применении именно img, то на сервере или на клиенте меняйте margin-left каждого изображения. Вот пример для клиента на js (+jq)
codepen.io/iiil/pen/EGFns

Comments

[Юрий Лобанов]

Почитайте про background-size, background-position, очень не хочется комп включать для примера. Или завтра уже )

[kirigosh]

ооо...для меня это слишком сложно... Я ,так себе, знаю html и css,а js,файлы движка и все остальные страшные слова для меня неизвестны.Если бы я ещё знал как работает движок (dle),по img или еще как-то,то было бы проще.

[Юрий Лобанов]

@kirigosh может на css кто подскажет. Выравнять изображения по центру легко, если ширина блока шире codepen.io/iiil/pen/AiIhv
А вот когда ширина блока меньше ширины изображения - лично я без js не могу придумать ничего.

Answer 3

[kirigosh]

#minibox {
	overflow:hidden;
	width:160px;
	background: url(../img/1.jpg);
	height:160px;
	background-size: cover;
	background-position:center;
}

да у меня получилось, но код пишется для движка и мне нужно именно img в html, а не background в css

Comments

[Юрий Лобанов]

изменил ответ, посмотрите.

Answer 4

[ultrbi4]

Есть еще одно решение, но в ниже 9 ie не работает

.box {
	display:block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

#minibox {
	position: relative; 
	overflow:hidden;
	width:160px;
	height:160px;
}

Comments

[Юрий Лобанов]

Вы уверены в этом решении? Оно не будет работать для картинок. Кроме того, даже если бы работало - картинка будет искажаться, а идея именно скрыть края слева и справа.

[ultrbi4]

Извиняюсь, упустил эти детали )

[Юрий Лобанов]

@ultrbi4 а у меня еще один вопрос, если можно - почему не работало бы в версиях ниже ie9? ) Что тут такого используется, что та же восьмерка не поддерживает?