Централизация изображений на странице

Wolfdp · June 15, 2012

Суть задачи:

На странице должна быть отображена лишь картинка с неизвестными размерами (то есть может быть разрешением 100х200, а может и 1920х1080). Первое: нужно выровнять эту картинку строго по центру (то есть и по вертикали, и по горизонтали). Второе: нужно ограничить в размерах изображение с помощью свойств max-heigt; max-width; относительно размеров окна браузера: если изображение больше, то уменьшается до тех пор пока не влезет, остальные остаются как есть.

Покопавшись я нашел довольно много примеров для выравнивания картинки по центру, но проблема в том, что во всех примерах не было манипуляций с размерами изображения. Если ставить ограничение размера в пикселях (max-heigt: 200px; max-width: 200px; ) или поставить статический размер контейнеров в которых размещаем изображение (в смысле их размер указать в пикселях/сантиметрах/дюймах, а не в процентах), то всё прекрасно работает. У меня сложилось мнение, что наш контейнер смотрит размер внутреннего содержимого и растягивается под него (нужно по идее наоборот). Можете подсказать где я туплю?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#imageholder {
	left: 0px;
	top: 0px;
	position: fixed;
	width: 100%;
	height: 100%;
	display: table;
	table-layout: fixed; /* запретил растягиваться ячейке по ширине */
	background-color: #5080C3;
}
#inner {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
}
#inner img
{
	margin: auto;
	max-height: 95%;
	max-width: 95%;
}
</style>
</head>
<body>
<div id="imageholder">
	<div id="inner">

<img src="picture.jpg" alt="picture" />

	</div>
</div>
</body>
</html>