Отцентрировать картинку по вертикали, так чтобы она изменяла размер в зависимости от окна браузера

@MsVesnushka · Регистрация: 01.09.2016

Author24 — интернет-сервис помощи студентам

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

HTML5

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Поиск</title>
  <style>
p.img{
  text-align: center; 
}
  p.poisk{
  text-align: center;
  }
  input:focus {
  border-color: blue;
  color: blue;
  box-shadow: 0 0 5px blue;
  }
  </style>
 </head>
 <body>
  <form>
   <p class="img"><img src="kos.jpeg" alt="Картинка Google" border="0"></p>
   <p class="poisk"><input type="search" name="q" placeholder="Введите текст для поиска"> 
   <input type="submit" value="Искать"></p>
   </form>
 </body>
</html>

@cyb0rg_01 · 02.09.2016, 10:15

https://jsfiddle.net/v193bj72/1/

HTML5

<div class="test-block w-center h-center">
    <div class="test-block-inside w-center h-center">
    </div>
</div>

CSS

.test-block {
    border: 1px black solid;
    width: 100px;
    height: 100px;
}
.test-block-inside {
    border: 1px black solid;
    width: 10px;
    height: 10px;
}
.w-center {
    margin: auto;
}

Javascript

document.addEventListener("DOMContentLoaded", function(event) {   
   hCenteredElementsInit();
});
 
window.addEventListener("resize", function(event) {   
   hCenteredElementsInit();
});
 
function hCenteredElementsInit()
{
   var hCenteredElements = document.getElementsByClassName("h-center");
     
   Array.prototype.forEach.call(hCenteredElements, function(elem) {
       var parentHeight = elem.parentElement.clientHeight |   document.documentElement.clientHeight;
       var parentMarginTop = parseInt(elem.parentElement.style.marginTop) | 0;
       elem.style.marginTop = (parentHeight / 2 - elem.clientHeight / 2 - parentMarginTop) + "px";
   });
}

@MsVesnushka · 02.09.2016, 10:16 **[ТС]**

А без Js это возможно?

@cyb0rg_01 · 02.09.2016, 10:20

MsVesnushka, да, в случае абсолютного позиционирования

@MsVesnushka · 02.09.2016, 10:33 **[ТС]**

А можешь показать как?

@cyb0rg_01 · 02.09.2016, 10:34

MsVesnushka, https://learn.javascript.ru/css-center

@MsVesnushka · 02.09.2016, 10:40 **[ТС]**

Спасибо, вечером попробую

@mrtoxas · 02.09.2016, 10:48

HTML5

1	<div class="block"></div>

CSS

.block{
  width:10vw;
  height:10vw;
  background:lightblue;
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
}

Результат

@Fedor92 · 02.09.2016, 10:54

mrtoxas, а если будет прокрутка оно с бегунком ездить будет?

MsVesnushka, а Вам следует немного видоизменить вёрстку для получения желаемого результата, а для начала неплохо бы выложить макет, что должно получится и какого размера будет картинка и самое главное где будет расположена... Подобные вещи можно сделать без всякого позиционирования...

@mrtoxas · 02.09.2016, 11:03

Fedor92, А что, где-то сказано, что не должно? Есть изображение, оно отцентировано дальше некуда и уменьшается. Если не надо так, то проблема решается заменой одной строки

@Fedor92 · 02.09.2016, 11:10

Сообщение от mrtoxas

Если не надо так, то проблема решается заменой одной строки

Какой строки? Ты бы этот код стал юзать, когда бы себе поиск писал?

Покажи лучше что будет, если к нему добавить код html, body{height:1500px} к примеру...

@mrtoxas · 02.09.2016, 11:18

Если это для слайда на весь экран и посреди поиск, то почему бы и нет? Правда, насчет vw не уверен. Не понято что ТС делает, поэтому есть вопрос - есть ответ, а дальше разбираться.

ТС сказал, что у него боди 1500px? Что за фантазии?

@Fedor92 · 02.09.2016, 11:35

Сообщение от mrtoxas

ТС сказал, что у него боди 1500px? Что за фантазии?

Лучше не выводи меня, ведь знаешь, что не прав... Это не гугловский сайт и мы оба это знаем... fixed лучше всего использовать для липких элементов, таких как плавающее меню или баннеры в остальном лучше забыть про position:fixed, если ситуация того не требует, absolute ещё куда ни шло... Если это липкая форма при прокрутке тогда согласен - это уже мои фантазии, а если - это часть шапки, то будет интересно посмотреть, как она ездить будет...

MsVesnushka, ну так что там у Вас липкая форма поиска или кусок шапки, или кусок тела документа, или Вы ещё не определились... Хотелось бы комментарий, пока мы не передрались тут...

@MsVesnushka · 02.09.2016, 11:52 **[ТС]**

Форма поиска располагается под рисунком и так же зависит от размеров окна браузера.
И давайте без драк =) Я сама ещё в этом во всем плохо разбираюсь. Только начала изучать.
И поставили мне задачу: чтоб картинка была по центру окна и по вертикали и по горизонтали и чтоб изменялся размер в зависимости от окна браузера и больше никаких указаний не было. Вчера облазила весь интернет, ничего не поняла и не нашла, поэтому и написала здесь.

@Fedor92 · 02.09.2016, 12:02

MsVesnushka, если высота body не будет превышать 100%, тогда Вам подойдёт код, который предложил mrtoxas, то есть если у страницы не будет прокрутки... Если же высота body будет больше 100%, то есть будут области прокрутки, то в коде который предложил mrtoxas, нужно будет изменить position:absolute на position:fixed... Если Вы только начали изучать вёрстку, то лучше пока не использовать poisition:fixed, пока это свойство не изучили, оно весьма коварное и содержит много подводных камней... Для чего его применяют я уже написал выше... Можно конечно этот код модифицировать для старых броузеров и адаптировать для новичка, если Важна кроссбраузерность и Вы пока не знаете таких свойств и значений как: transform, 10vw...

@olegnaruto · 02.09.2016, 12:09

А так не вариант?

HTML5

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Поиск</title>
  <style>
.container{
    padding: 5% 30%;
    text-align: center;
}
div{
    width: 40%;
    height: 20%;
}
img{
    width: 100%;
    height: 100%;
}
input:focus{
  border-color: blue;
  color: blue;
  box-shadow: 0 0 5px blue;
 }
</style>
 </head>
 <body>
 
<div class="container">
    <form>
        <p class="img"><img src="kos.jpeg" alt="Картинка Google" border="0"></p>
        <p class="poisk"><input type="search" name="q" placeholder="Введите текст для поиска"> 
        <input type="submit" value="Искать"></p>
    </form>
</div>
 
 
   </form>
 </body>
</html>

@Fedor92 · 02.09.2016, 12:23

MsVesnushka, ну и от меня на худой конец вариантик

:

HTML5

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Поиск</title>
  <style>
  *{box-sizing:border-box; margin: 0; padding: 0}
  html,body{width: 100%; height: 100%}
  div#search{display:table; width:inherit; height:inherit; text-align: center; vertical-align:middle}
  form{display:table-cell; vertical-align:middle; text-align:center}
    p.img{
        height:auto;
        width:100%;
        margin:0 auto;
        height: auto;   
    }
    img{width:20%}
      p.poisk{
      text-align: center;
      }
      input:focus {
      border-color: blue;
      color: blue;
      box-shadow: 0 0 5px blue;
      }
  </style>
 </head>
 <body>
    <div id="search">
        <form>
            <p class="img"><img src="http://liubavyshka.ru/_ph/17/2/240956094.jpg?1472803633" alt="Картинка Google" border="0"></p>
            <p class="poisk"><input type="search" name="q" placeholder="Введите текст для поиска"> 
            <input type="submit" value="Искать"></p>
        </form>
    </div>
</body>
</html>

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	02.09.2016, 11:35	13
	Сообщение от mrtoxas ТС сказал, что у него боди 1500px? Что за фантазии? Лучше не выводи меня, ведь знаешь, что не прав... Это не гугловский сайт и мы оба это знаем... fixed лучше всего использовать для липких элементов, таких как плавающее меню или баннеры в остальном лучше забыть про position:fixed, если ситуация того не требует, absolute ещё куда ни шло... Если это липкая форма при прокрутке тогда согласен - это уже мои фантазии, а если - это часть шапки, то будет интересно посмотреть, как она ездить будет... MsVesnushka, ну так что там у Вас липкая форма поиска или кусок шапки, или кусок тела документа, или Вы ещё не определились... Хотелось бы комментарий, пока мы не передрались тут... 0

@MsVesnushka 0 / 0 / 0 Регистрация: 01.09.2016 Сообщений: 5
	02.09.2016, 10:16 [ТС]	3
	А без Js это возможно? 0

@cyb0rg_01 Фрилансер 735 / 352 / 96 Регистрация: 05.05.2014 Сообщений: 2,621
	02.09.2016, 10:20	4
	MsVesnushka, да, в случае абсолютного позиционирования 1

@MsVesnushka 0 / 0 / 0 Регистрация: 01.09.2016 Сообщений: 5
	02.09.2016, 10:33 [ТС]	5
	А можешь показать как? 0

@cyb0rg_01 Фрилансер 735 / 352 / 96 Регистрация: 05.05.2014 Сообщений: 2,621
	02.09.2016, 10:34	6
	MsVesnushka, https://learn.javascript.ru/css-center 1

@MsVesnushka 0 / 0 / 0 Регистрация: 01.09.2016 Сообщений: 5
	02.09.2016, 10:40 [ТС]	7
	Спасибо, вечером попробую 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	02.09.2016, 10:54	9
	mrtoxas, а если будет прокрутка оно с бегунком ездить будет? MsVesnushka, а Вам следует немного видоизменить вёрстку для получения желаемого результата, а для начала неплохо бы выложить макет, что должно получится и какого размера будет картинка и самое главное где будет расположена... Подобные вещи можно сделать без всякого позиционирования... 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	02.09.2016, 11:03	10
	Fedor92, А что, где-то сказано, что не должно? Есть изображение, оно отцентировано дальше некуда и уменьшается. Если не надо так, то проблема решается заменой одной строки 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	02.09.2016, 11:10	11
	Сообщение от mrtoxas Если не надо так, то проблема решается заменой одной строки Какой строки? Ты бы этот код стал юзать, когда бы себе поиск писал? Покажи лучше что будет, если к нему добавить код html, body{height:1500px} к примеру... 0

@mrtoxas 3825 / 2675 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	02.09.2016, 11:18	12
	Если это для слайда на весь экран и посреди поиск, то почему бы и нет? Правда, насчет vw не уверен. Не понято что ТС делает, поэтому есть вопрос - есть ответ, а дальше разбираться. ТС сказал, что у него боди 1500px? Что за фантазии? 0

@MsVesnushka 0 / 0 / 0 Регистрация: 01.09.2016 Сообщений: 5
	02.09.2016, 11:52 [ТС]	14
	Форма поиска располагается под рисунком и так же зависит от размеров окна браузера. И давайте без драк =) Я сама ещё в этом во всем плохо разбираюсь. Только начала изучать. И поставили мне задачу: чтоб картинка была по центру окна и по вертикали и по горизонтали и чтоб изменялся размер в зависимости от окна браузера и больше никаких указаний не было. Вчера облазила весь интернет, ничего не поняла и не нашла, поэтому и написала здесь. 0

@Fedor92 2964 / 2599 / 1068 Регистрация: 15.12.2012 Сообщений: 9,876 Записей в блоге: 11
	02.09.2016, 12:02	15
	MsVesnushka, если высота body не будет превышать 100%, тогда Вам подойдёт код, который предложил mrtoxas, то есть если у страницы не будет прокрутки... Если же высота body будет больше 100%, то есть будут области прокрутки, то в коде который предложил mrtoxas, нужно будет изменить position:absolute на position:fixed... Если Вы только начали изучать вёрстку, то лучше пока не использовать poisition:fixed, пока это свойство не изучили, оно весьма коварное и содержит много подводных камней... Для чего его применяют я уже написал выше... Можно конечно этот код модифицировать для старых броузеров и адаптировать для новичка, если Важна кроссбраузерность и Вы пока не знаете таких свойств и значений как: transform, 10vw... 0

Отцентрировать картинку по вертикали, так чтобы она изменяла размер в зависимости от окна браузера

Решение