Форум программистов, компьютерный форум, киберфорум
Наши страницы

HTML, CSS

Войти
Регистрация
Восстановить пароль
 
Рейтинг: Рейтинг темы: голосов - 80, средняя оценка - 4.99
Wolfdp
538 / 525 / 67
Регистрация: 15.06.2012
Сообщений: 2,102
Записей в блоге: 1
#1

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

15.06.2012, 06:22. Просмотров 10391. Ответов 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
Здравствуйте! Я подобрал для вас темы с ответами на вопрос Выравнивание изображения по центру окна браузера (HTML, CSS):

Выравнивание контента по центру окна браузера - HTML, CSS
Добрый день. Мне нужно выравнять все по центру экрана. Т.е. и по вертикали и по горизонтали. По типу сайта ya.ru У меня область поиска...

Вертикальное выравнивание по центру в окне браузера - HTML, CSS
Добрый день! Делаю адаптивный сайт. Он имеет статическую картинку у div'a, сам фон (background в body) чёрный. При увеличении\уменьшении...

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

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

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

Выравнивание кнопок при изменении размеров окна браузера - HTML, CSS
Вопрос такой: На главной странице есть три кнопки, которые стоят в ряд, внутри которых картинки. У них прописана позиция float:left. Как...

6
maximus2011
268 / 260 / 10
Регистрация: 21.02.2012
Сообщений: 1,078
15.06.2012, 09:09 #2
Берешь картинку, закидывешь в див и ему пишешь значения макс хэйт и макс вэйт потом прописываешь условие ему же
CSS
1
margin:0 auto;
и все, он стоит по середине.
0
Wolfdp
538 / 525 / 67
Регистрация: 15.06.2012
Сообщений: 2,102
Записей в блоге: 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
448 / 439 / 15
Регистрация: 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 / 0
Регистрация: 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
538 / 525 / 67
Регистрация: 15.06.2012
Сообщений: 2,102
Записей в блоге: 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
2391 / 1064 / 98
Регистрация: 23.06.2011
Сообщений: 3,323
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
Привет! Вот еще темы с ответами:

как отцентрировать сайт по центру окна браузера при изменении маштаба - HTML, CSS
У меня такая проблемма: делаю сайт и когда в Google Chorme изменяю (уменьшаю) маштаб весь сайт уходит в лево, а нужно что бы он...

Остановить выравнивание div при определённом размере окна браузера - HTML, CSS
Подскажите пожалуйста, есть у меня 2 div блока, один в другом. #header_recommendations_one { height: auto; width: 100%; ...

Не меняется размер изображения при извинении окна браузера - HTML, CSS
Здравствуйте. Подскажите пожалуйста как решить проблему. Поля элемента &lt;div id=&quot;allcontent&quot;&gt; задав процентах в зависимости от размера...

Сохранение пропорций изображения при изменении рамзеров окна браузера? - HTML, CSS
наглядный пример масштабирования картинки при изменении окна браузера - просто картинка, открытая в браузере, попробуйте поизменять окно...


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

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

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