Wolfdp
-
Posts
1 -
Joined
-
Last visited
Wolfdp's Achievements
Explorer (1/14)
0
Reputation
-
Суть задачи: На странице должна быть отображена лишь картинка с неизвестными размерами (то есть может быть разрешением 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> И вот пару примеров, как оно выглядит... index (изображение 900х11845) index1 (изображение 5948х1080) index2 (изображение 2560х1600) index3 (изображение 600х480) Как видно из первого примера, проблема возникает когда изображение должно сжиматься по высоте (чего не происходит). P.S. Я в css "школьник самоучка", если можно, с подробным объяснением, пожалуйста.