Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.85/60: Рейтинг темы: голосов - 60, средняя оценка - 4.85
Wolfdp
867 / 777 / 202
Регистрация: 15.06.2012
Сообщений: 3,047
Записей в блоге: 1
Завершенные тесты: 1
1

Выравнивание изображения по центру окна браузера

15.06.2012, 06:22. Просмотров 11198. Ответов 6
Метки нет (Все метки)

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

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.imageholder {
  left: 0px;
  top: 0px;
  position: absolute;
  display: table;
  height: 100%;
  width: 100%;
  vertical-align: middle;
  text-align: center;
}
.inner {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  position: relative;
}
.inner img
{
  margin: auto;
  max-height: 80%;
  max-width: 80%;
}
</style>
</head>
<body>
  <div class="imageholder">
    <div class="inner">
      <img src="picture.jpg" alt="picture" />
    </div>
  </div>
</body>
</html>
P.S. Если что-то не так в оформлении темы, мои извинения. Я новичок тут. (>_<)
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
15.06.2012, 06:22
Ответы с готовыми решениями:

Выравнивание контента по центру окна браузера
Добрый день. Мне нужно выравнять все по центру экрана. Т.е. и по вертикали и...

Как выравнить центр изображения по центру окна браузера?
Есть сайт: r2-shop.ru Там есть слайдер, который центрируется с помощью...

Вертикальное выравнивание по центру в окне браузера
Добрый день! Делаю адаптивный сайт. Он имеет статическую картинку у div'a, сам...

Выравнивание изображения по центру относительно его центра
Задаю картинке position: absolute; left: 50%; top:50%; , а она выравнивается по...

Выравнивание блоков по центру, независимо от маштаба окна в браузере
я начинающий верстальщик, позиционирую все блоки через - position: absolute;...

6
maximus2011
268 / 260 / 35
Регистрация: 21.02.2012
Сообщений: 1,078
15.06.2012, 09:09 2
Берешь картинку, закидывешь в див и ему пишешь значения макс хэйт и макс вэйт потом прописываешь условие ему же
CSS
1
margin:0 auto;
и все, он стоит по середине.
0
Wolfdp
867 / 777 / 202
Регистрация: 15.06.2012
Сообщений: 3,047
Записей в блоге: 1
Завершенные тесты: 1
15.06.2012, 09:31  [ТС] 3
Цитата Сообщение от maximus2011 Посмотреть сообщение
Берешь картинку, закидывешь в див и ему пишешь значения макс хэйт и макс вэйт потом прописываешь условие ему же
CSS
1
margin:0 auto;
и все, он стоит по середине.
HTML5
1
2
3
<div style="margin: auto; max-height: 80%; max-width: 80%;">
<img src="picture.jpg" alt="picture" />
</div>
Как-то так? Попытка была, не работает. В этом случае картинка вообще выводиться в родном масштабе. Лично у меня сложилось впечатление, что я не привязываю max-width, max-height к текущей ширине родительского контейнера.
0
Sergio Aguero
451 / 442 / 21
Регистрация: 11.04.2012
Сообщений: 2,074
15.06.2012, 09:53 4
как я делал:
1.картинка в диве
2.
CSS
1
2
3
4
5
div{
  width:250px; //здесь задаете свою ширину картинки (т.е. дива)
  height:50px;//здесь задаете свою высоту картинки
  margin:0 auto;
}
3. все работает идеально
0
J10
4 / 4 / 3
Регистрация: 30.04.2011
Сообщений: 50
15.06.2012, 10:21 5
Я делаю вот так:

CSS
1
2
3
4
5
6
div {
    overflow: hidden;
    max-width: 60%;
    padding: 0px;
    margin: auto;
}
HTML5
1
2
3
<div>
    <img src=" ... " width="100%">
</div>
0
Wolfdp
867 / 777 / 202
Регистрация: 15.06.2012
Сообщений: 3,047
Записей в блоге: 1
Завершенные тесты: 1
15.06.2012, 12:18  [ТС] 6
Цитата Сообщение от Sergio Aguero Посмотреть сообщение
width:250px; //здесь задаете свою ширину картинки (т.е. дива)
Размеры картинок неизвестны. Равняет только по горизонтали. Не то.


Цитата Сообщение от J10 Посмотреть сообщение
Я делаю вот так:
Опять же, мне нужно выровнять И ПО ВЕРТИКАЛИ, И ПО ГОРИЗОНТАЛИ.

В общем как и предполагал, проблема в том, что таблицы по определению "растягиваются" относительно внутреннего содержимого, а нужно наоборот - подогнать картинку к размерам ячейки таблицы. Зафиксировать ширину удалось используя table-layout: fixed;... А вот что с высотой делать, не сильно представляю. Пробовал уже запихнуть всё это дело в ещё один контейнер - не работает.

Вот что примерно должно выйти:
https://dl.dropbox.com/u/16594218/tmp/index1.html
https://dl.dropbox.com/u/16594218/tmp/index2.html
https://dl.dropbox.com/u/16594218/tmp/index3.html

И вот в каком случае проблема
https://dl.dropbox.com/u/16594218/tmp/index.html
0
newJS
2397 / 1070 / 307
Регистрация: 23.06.2011
Сообщений: 3,330
15.06.2012, 20:22 7
центрировать можно так, как вариант

HTML5
1
<div id="centr"><img src="pics/pic2.jpg" alt=""></div>
CSS
1
#centr {position:absolute; top:50%; left:50%;}
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
(function(){
var obj, elem, ind, len, mass=["pics/pic1.jpg", "pics/pic2.jpg", "pics/pic3.jpg"];
len=mass.length;
ind=0;//обязательно не тот который прописан в html
 
 
onload=function(){
obj=document.getElementById("centr").getElementsByTagName("img")[0];
elem=obj.parentNode.style;
obj.onload=sizes;
obj.src=mass[ind];
 
 };
 
 
function sizes(){
var w, h;
w=obj.width;
h=obj.height;
elem.width=w+'px';
elem.height=h+'px';
elem.margin=(-(h/2))+'px 0 0 '+(-(w/2))+'px';
elem.visibility="visible";//опера сильно тормозит с пересчётом координат, дёргала
setTimeout(
function(){
elem.visibility="hidden";
ind=ind+1==len?0:ind+1;
obj.src=mass[ind];}, 1000);
 };
 
 })();
0
15.06.2012, 20:22
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
15.06.2012, 20:22

Как сделать выравнивание всплывающего окна по центру (по оси Y)?
Есть pop-up на jQuery, который открывается по клику. Блок с информацией этого...

Выравнивание кнопок при изменении размеров окна браузера
Вопрос такой: На главной странице есть три кнопки, которые стоят в ряд, внутри...

как отцентрировать сайт по центру окна браузера при изменении маштаба
У меня такая проблемма: делаю сайт и когда в Google Chorme изменяю (уменьшаю)...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru