Html как изменить положение картинки

How can i make the image start from the middle of this box? (middle b...
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>

How can i make the image start from the middle of this box? (middle both vertical and horizontal)

Joel Gauvreau's user avatar

asked Feb 3, 2011 at 15:33

Karem's user avatar

2

There are several ways to do this, and if it needs to work in all browsers (IE7+ and the rest) you need to do different things to make it work in some of the cases.

  1. Use absolute position. This only works if you know the size of the image.
    Here you set it to position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>.

    See example here: http://jsfiddle.net/JPch8/

  2. Use margin: 0 auto;text-align: center; and line-height/font-size.
    This is a bit more tricky, since line-height doesn’t work as it should in IE for inline-block elements like images. That’s where the font-size comes in.
    Basically, you set the line-height of the image container to the same as the container’s height. This will vertically align inline elements, but in IE you need to set the font-size instead to make it work.

    See example here: http://jsfiddle.net/JPch8/2/

  3. In modern browsers that support display: flex you can do it by simply setting the container div to display: flex; align-items: center; justify-content: center;

    See example here: https://jsfiddle.net/ptz9k3th/

answered Feb 3, 2011 at 15:37

Martin Jespersen's user avatar

Martin JespersenMartin Jespersen

25.5k8 gold badges55 silver badges66 bronze badges

2

put the image in a <div> with text-align:center; without specifying the size of the box

<div class="picture_div" style="margin:0px auto; text-align:center;">
     <img src="media/BezierCurve.gif" />
</div>

alternatively you can specify width and the height of the <div> box in order to center the image (actually the div box). 

<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
    <img src="media/BezierCurve.gif" />
</div>

answered Jul 7, 2015 at 2:56

Kagan Agun's user avatar

Kagan AgunKagan Agun

4591 gold badge6 silver badges7 bronze badges

HTML:

<div id="photo_leftPanel">
   <img src="bla.jpg">
</div>

CSS:

div.photo_leftPanel {
   position: relative;
}

div.photo_leftPanel > img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

answered Dec 14, 2019 at 10:28

Mindfield Studio's user avatar

«float:left; position:relative» probably doesn’t work as expected. Floated elements are considered absolute.

To get the image centered vertically you need a height on the div, and you need height on it’s parents. (Centering vertically is kind of a pain). My example below will work if those are your only elements but be aware that height: 100% on the containers will likely affect the rest of your layout.

<html>
<head><title></title>
<style type="text/css">
html, body { 
     height: 100%;
}

#photo_leftPanel {
     height: 500px; /*guessing*/
     width: 604px;
     float: left;
}

#photo_leftPanel img {
     margin: auto;
     vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>

answered Feb 3, 2011 at 15:43

Cfreak's user avatar

CfreakCfreak

19k6 gold badges49 silver badges60 bronze badges

A suitable solution for modern browsers is flexbox. A flex container can be configured to align its items both horizontally and vertically.

<div style="display: flex; align-items: center; justify-content: center; width: 600px; height: 600px;">
    <img src="bla.jpg">
</div>

answered May 29, 2019 at 14:56

William's user avatar

WilliamWilliam

7,9575 gold badges38 silver badges43 bronze badges

I hope I understand what you are trying to achieve.

<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>

answered Feb 3, 2011 at 15:35

Or Weinberger's user avatar

Or WeinbergerOr Weinberger

7,24220 gold badges70 silver badges114 bronze badges

2

Источник
<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<img src="bla.jpg">
</div>

How can i make the image start from the middle of this box? (middle both vertical and horizontal)

Joel Gauvreau's user avatar

asked Feb 3, 2011 at 15:33

Karem's user avatar

2

There are several ways to do this, and if it needs to work in all browsers (IE7+ and the rest) you need to do different things to make it work in some of the cases.

  1. Use absolute position. This only works if you know the size of the image.
    Here you set it to position: absolute; left: 50%; top: 50%; margin: -<half height of image> 0 0 -<half width of image>.

    See example here: http://jsfiddle.net/JPch8/

  2. Use margin: 0 auto;text-align: center; and line-height/font-size.
    This is a bit more tricky, since line-height doesn’t work as it should in IE for inline-block elements like images. That’s where the font-size comes in.
    Basically, you set the line-height of the image container to the same as the container’s height. This will vertically align inline elements, but in IE you need to set the font-size instead to make it work.

    See example here: http://jsfiddle.net/JPch8/2/

  3. In modern browsers that support display: flex you can do it by simply setting the container div to display: flex; align-items: center; justify-content: center;

    See example here: https://jsfiddle.net/ptz9k3th/

answered Feb 3, 2011 at 15:37

Martin Jespersen's user avatar

Martin JespersenMartin Jespersen

25.5k8 gold badges55 silver badges66 bronze badges

2

put the image in a <div> with text-align:center; without specifying the size of the box

<div class="picture_div" style="margin:0px auto; text-align:center;">
     <img src="media/BezierCurve.gif" />
</div>

alternatively you can specify width and the height of the <div> box in order to center the image (actually the div box). 

<div id="blue" style="border:1px solid blue; width:100px; height:100px; margin:10px auto;">
    <img src="media/BezierCurve.gif" />
</div>

answered Jul 7, 2015 at 2:56

Kagan Agun's user avatar

Kagan AgunKagan Agun

4591 gold badge6 silver badges7 bronze badges

HTML:

<div id="photo_leftPanel">
   <img src="bla.jpg">
</div>

CSS:

div.photo_leftPanel {
   position: relative;
}

div.photo_leftPanel > img {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

answered Dec 14, 2019 at 10:28

Mindfield Studio's user avatar

«float:left; position:relative» probably doesn’t work as expected. Floated elements are considered absolute.

To get the image centered vertically you need a height on the div, and you need height on it’s parents. (Centering vertically is kind of a pain). My example below will work if those are your only elements but be aware that height: 100% on the containers will likely affect the rest of your layout.

<html>
<head><title></title>
<style type="text/css">
html, body { 
     height: 100%;
}

#photo_leftPanel {
     height: 500px; /*guessing*/
     width: 604px;
     float: left;
}

#photo_leftPanel img {
     margin: auto;
     vertical-align: middle;
}
</style>
</head>
<body>
<div id="photo_leftPanel">
<img src="bla.jpg" />
</div>
</body>
</html>

answered Feb 3, 2011 at 15:43

Cfreak's user avatar

CfreakCfreak

19k6 gold badges49 silver badges60 bronze badges

A suitable solution for modern browsers is flexbox. A flex container can be configured to align its items both horizontally and vertically.

<div style="display: flex; align-items: center; justify-content: center; width: 600px; height: 600px;">
    <img src="bla.jpg">
</div>

answered May 29, 2019 at 14:56

William's user avatar

WilliamWilliam

7,9575 gold badges38 silver badges43 bronze badges

I hope I understand what you are trying to achieve.

<div id="photo_leftPanel" style="float: left; width: 604px; position: relative;">
<center><img src="bla.jpg" style="vertical-align:middle;"></center>
</div>

answered Feb 3, 2011 at 15:35

Or Weinberger's user avatar

Or WeinbergerOr Weinberger

7,24220 gold badges70 silver badges114 bronze badges

2

Источник

Передвигаем картинку. Двигаем рисунок.

PHP урок № 171

На мой взгляд самый простой способ разместить картинку в нужном месте странице —
это использовать CSS.

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — технология описания внешнего
вида документа, написанного языком разметки. Преимущественно используется как
средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми
видами документов в формате XML, включая SVG и XUL.

Более подробно ознакомится с CSS можно здесь.

На это тему написано огромное количество книг, изучая HTML нельзя обойти CSS это не
правильно. Так что начинается всё с HTML. :)Я начну рассказ то же с применения HTML. Как
известно в HTML есть теги, которые формируют вид страницы в браузере.


<p></p>

<h1></h1> 

<div></div> 

<table></table>

<thead></thead>

<tbody></tbody>

<tfoot></tfoot>

<tr></tr>

<th></th>

<td></td>

У каждой пары тегов есть свои атрибуты, а в свою очередь у каждого
атрибута есть свои аргументы, немного путано, но эта цепочка именно так и
работает. Весь текст находящийся между парой тегов исполняется и представляется
в браузере согласно языка HTML и стилем браузера по умолчанию.

Стиль браузера — стандартный стиль, используемый браузером по умолчанию для
представления элементов.

У всех тегов описанных в листинге №1 есть атрибут align он отвечает за
расположение текста или картинки в пространстве страницы ПО ГОРИЗОНТАЛИ. Раз
есть атрибут тега, значит должен быть и аргумент этого атрибута.

Выравнивание текста по центру. Текст помещается по центру горизонтали окна
браузера или контейнера, где расположен текстовый блок. Строки текста словно
нанизываются на невидимую ось, которая проходит по центру веб-страницы. Подобный
способ выравнивания активно используется в заголовках и различных подписях,
вроде под рисуночных, он придает официальный и солидный вид оформлению текста. Во
всех других случаях выравнивание по центру применяется редко по той причине, что
читать большой объем такого текста неудобно.

<center><img src=»/images/Avatar1/Ava0002.gif» width=»81″ height=»100″> </center>

Выравнивание по ширине, что означает одновременное выравнивание по левому и
правому краю. Чтобы произвести это действие браузер в этом случае добавляет
пробелы между словами.

Выравнивание текста по левому краю. В этом случае строки текста выравнивается по
левому краю, а правый край располагается «лесенкой». Такой способ выравнивания
является наиболее популярным на сайтах, поскольку позволяет пользователю легко
отыскивать взглядом новую строку и комфортно читать большой текст.

<img src=»/images/Avatar1/Ava0002.gif» width=»81″ height=»100″ align=»left»>

Выравнивание текста по правому краю. Этот способ выравнивания выступает в роли
антагониста предыдущему типу. А именно, строки текста равняются по правому краю, а
левый остается «рваным». Из-за того, что левый край не выровнен, а именно с него
начинается чтение новых строк, такой текст читать труднее, чем, если бы он был
выровнен по левому краю. Поэтому выравнивание по правому краю применяется обычно
для коротких заголовков объемом не более трех строк. Мы не рассматриваем
специфичные сайты, где текст приходится читать справа налево, там возможно
подобный способ выравнивания и пригодится. Но где вы у нас в стране видели такие
сайты.

<img src=»/images/Avatar1/Ava0002.gif» width=»81″ height=»100″ align=»right»>

Это картинка в таблице с отступами справа и слева. Здесь используются атрибуты
hspace — это отступы по горизонтали и vspace — отступ по вертикали,
причем сразу с двух сторон 70->картинка<-70.

<table width=»17%» height=»206″ border=»1″ cellpadding=»3″ cellspacing=»3″>
<br> <tr>
<br> <td><img src=»/images/Ava0002.gif» hspace=»70″ vspace=»50″ align=»bottom»></td>
<br> </tr>
<br></table>

Теперь используем CSS. Поместим картинку для начала в контейнер или в блок — в этом
нам поможет тег див. Он собственно и является своего рода контейнером или ещё
называют блоком. Про блочную вёрстку слышали, вот это с его помощью делается.

Синий край это границы контейнера (div), пространство внутри, которое заштриховано,
есть то пространство, на которое надо отступить внутри контейнера от его границ
(стрелками указана величина в пикселах). Таким образом и происходит размещение
контента внутри блока.

Листинг № Array — Размещение картинки с помощью CSS. Файл стиля.

@charset «windows-1251»;
/* CSS Document */
.gif {
padding-top: 200px;
padding-left: 150px;
width: 350px;
padding-bottom: 47px;
}

Рассмотрим подробнее. Первые две строки для нас сейчас не важны их пропускаем.
Далее идёт точка — это обозначение класса в CSS. Примерно читается так: класс gif
имеет следующие атрибуты:

Так же есть атрибут padding-right: — это отступ справа. Ну теперь наверно стало картина
прояснятся как можно подвинуть картинку, т.е. меняя аргументы атрибутов, те самые
циферки что измеряются в пикселах, хотя кстати то же не обязательно в них. Помимо
того, что мы рассмотрели атрибуты которые применяются с тегом див, которые
отвечают за расположение объекта внутри контейнера. Существуют ещё атрибуты
которые в свою очередь двигают контейнер снаружи относительно страницы это
margin.

Листинг № Array — Это весь HTML-код используемый для установки картинки в нужном месте страницы.

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN» «http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=windows-1251″>
<title>Untitled Document</title>
<link href=»/hio.css» rel=»stylesheet» type=»text/css»>
</head>
<body>
<div class=»gif»><img src=»/images/Avatar1/Ava0002.gif» border=0></div>
</body>
</html>

Листинг № Array — Таблица CSS стилей для последнего примера. (Файл hio.css)

@charset «windows-1251»;
/* CSS Document */
.gif {
padding-top: 200px;
padding-left: 150px;
width: 350px;
padding-bottom: 47px;
margin-top: 50px;
margin-right: 250px;
margin-bottom: 101px;
margin-left: 312px;
}

SETTER © LPHP.RU
Администрация сайта
Array



Источник

Размеры и позиционирование изображений на веб-страницах

Вспомним, что для добавления файлов изображений на веб-страницу используется одиночный тег <img> с атрибутами:

<img scr="адрес" alt="описание" width="ширина" height="высота">

Атрибуты ширины и высоты можно опустить, если размер задается с помощью одноименных свойств CSS.

Если картинка больше ширины блока, в котором размещается, она будет выходить за пределы этого блока.

Однако ширину можно выражать в процентах. При этом она вычисляется от размера родительского блока. В таком случае изображение будет расширяться и сжиматься, подстраиваясь под разные экраны. При расширении потери качества не произойдет, так как реальный размер картинки все-равно больше.

<img src="linuxhistory.png" 
     alt="История Linux" 
     width="100%" height="auto">

Значение auto для height заставляет высоту изображения масштабироваться пропорционально ширине.

То же самое через css-правило:

img {
  width: 100%;
  height: auto;
}
… 
<img src="linuxhistory.png" 
     alt="История Linux">

Или встроенный в элемент стиль:

<img src="linuxhistory.png" 
     alt="История Linux"
     style="width:100%;height:auto">

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

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

Наиболее простым способом решения проблемы является использование css-свойства max-width со значением в процентах и с одновременным указанием размера изображения в пикселях в атрибутах элемента img.

В этом случае max-width растягивает картинку на всю ширину внешнего блока при условии, что размер этого блока не превышает размера изображения. Когда это не так, срабатывают значения атрибутов длины и ширины тега.

Ранее (см. урок 3), когда речь шла о блочных и строчных элементах, то для выравнивая отдельно стоящего изображения по центру приводился пример помещения его в блок div или figure. Однако мы можем сделать само изображение блочным элементом с помощью объявления display: block. После этого центрировать его с помощью margin: auto.

img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
… 
<img src="gnu.png" alt="Логотип GNU"
     width="491" height="480">

Бывает, что маленькие картинки предпочитают обтекать текстом слева или справа. Для этого используют свойство float со значением left или right. В случае float: left элемент будет «уплывать» налево. Другие элементы будут оказываться справа от него.

Здесь может потребоваться решать две проблемы:

  1. Бывает необходимо, чтобы только конкретный абзац обтекал изображение.
  2. На узких экранах обтекание должно смениться на расположение картинки и текста друг под другом. Иначе получается слишком мало места для текста сбоку от изображения, и верстка выглядит плохо.

Первая проблема решается с помощью свойства clear. В примере на скрине выше допустим мы не хотим, чтобы второй абзац обтекал символ копилефта. Следовательно, очищать обтекание мы должны у него.

<p style="clear:left;">
Самым известным …</p>

Объявление clear: left заставляет элемент перестать обтекать объекты, расположенные с левой стороны. Вариант clear: both – с обоих сторон. В нашем примере значение both дало бы тот же результат.

Чтобы убрать обтекание изображений на малых экранах, потребуется использовать @media-запрос, в котором значения свойств будут меняться. Однако если мы до этого оформляли элемент через атрибут style тега, то такой inline-стиль (строчный) имеет приоритет над внешней или внутренней таблицей стилей.

Поэтому в нашем случае понадобится использовать команду !impotant:

@media (max-width: 599px) {
  img {
    float: none!important;
    padding: 0!important;
    display: block;
    margin: 0 auto;
    max-width: 100%;
    height: auto;
  }
}

Когда на странице несколько изображений оформляются по-разному, то inline-стили могут выглядеть предпочтительными. Если же можно выделить несколько групп изображений, каждая из которых стилизуется по-своему, следует задуматься об использовании классов.

Свойство float применяется не только при позиционировании изображений, также любых блочных элементов, может служить основой создания отзывчивого дизайна.

Источник

Позиционирование в CSS

От автора: одним из наиболее полезных инструментов в CSS, на мой взгляд, является позиционирование элементов документа. Под термином «позиционирование» понимается возможность расположить элемент (блок, картинку и др.) в абсолютно любом месте документа.

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

скачать исходникискачать урок

Для начала давайте рассмотрим классический пример, где нам потребуется использование позиционирования… к слову, пример этот как раз и взят из одного из упомянутых выше вопросов. Итак, на указанной части шаблона:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Позиционирование в CSS

мы имеем 2 логические части — шапка и блок меню. При этом оба блока содержат в себе части единой картинки — автомобиля «заезжающего» с шапки на меню. Теоретически здесь мы могли бы обойтись и без позиционирования. Для этого достаточно было бы вырезать картинку шапки и фон меню, при этом на каждой из картинок присутствовала бы своя часть автомобиля:

Позиционирование в CSS

Позиционирование в CSS

Но этот вариант далеко не оптимален. Гораздо лучше было бы, если бы у нас имелась отдельно картинка автомобиля, которая совсем не зависела бы от остального потока элементов. В этом случае мы смогли бы «таскать» автомобиль, выбирая для него нужное расположение. Как раз такую возможность нам предоставляет свойство CSS под названием position.

Указанное свойство имеет следующие возможные атрибуты: position: absolute | fixed | relative | static

Относительно атрибута static следует заметить, что его можно не использовать вообще, поскольку изначально это атрибут любого элемента на странице, поэтому если указать для элемента свойство position:static, то абсолютно никаких изменений мы не увидим.

А вот 3 других атрибута — весьма полезны. Для начала давайте укажем описание каждого из них.

— absolute (абсолютный). Указывает, что элемент абсолютно позиционирован. В этом случае он не существует в обычном потоке документа подобно другим элементам, которые отображаются на веб-странице словно абсолютно позиционированного объекта и нет. Положение элемента задается атрибутами left, top, right и bottom относительно края окна браузера.

— fixed (фиксированный). По своим свойствам это значение аналогично аргументу absolute, но в отличие от него привязывается к указанной параметрами left, top, right и bottom точке на экране и не меняет своего положения даже при пролистывании веб-страницы.

— relative (относительный). Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра.

Итак, как же мы можем осуществить задуманное. Все просто. Нам известна ширина макета сайта (она фиксирована). Соответственно, все что потребуется — это разместить картинку, к примеру, в шапке и спозиционировать ее относительно шапки. «Сдвигать» картинку мы можем посредством упомянутых атрибутов left (сдвиг от левой границы), top (сдвиг от верхней границы), right (сдвиг от правой границы) и bottom (сдвиг от нижней границы). Во всех четырех случаях границами будут границы элемента, относительно которого осуществляется позиционирование. И вот здесь есть небольшой нюанс, который мы сейчас увидим.

Итак, картинку автомобиля мы вырезали из макета и размещаем ее в шапке:

<div class=«head» id=«div1»>

<a href «/»> Записки Путешественника</a>

<h2>на своем АВТО<br>и не только...</h2>

<img src=«images/car.png» width=«244» height=«172» alt=«» class=«car» />

</div>

В результате автомобиль расположится между ссылкой (для нее установлено выравнивание float:left) и заголовком второго уровня (для него установлено выравнивание float:right) в шапке. Пока что наша картинка находится в потоке элементов. Теперь давайте «изымем» ее из этого потока, чтобы ее можно было передвигать. Установим для элемента с классом car абсолютное позиционирование:

Если сейчас обновить страницу, то никаких изменений мы не увидим. Все потому, что мы пока что не указали те самые атрибуты left, top, right и bottom. Для позиционирования элемента необходимо указывать 2 атрибута (1 из них должен отвечать за горизонтальное движение, второй — за вертикальное… например, пара left-top или left-bottom, или right-top и т.д.).

Для начала давайте укажем нулевую точку отсчета для картинки, прижав ее к верхнему левому углу:

.car{

position:absolute;

left:0;

top:0;

}

Теперь, если обновить страницу, то мы сможем увидеть, что картинка действительно оказалась в верхнем левом углу, но не шапки, как мы могли ожидать… картинка прижалась к левому верхнему углу браузера:

Позиционирование в CSS

Почему так произошло? Дело в том, что задав абсолютное позиционирование элементу, он начинает позиционироваться относительно элемента body. Как же сделать так, чтобы элемент позиционировался относительно другого конкретного элемента, например, относительно своего родителя — шапки? Все очень просто. Для этого мы можем задать родительскому элементу, к примеру, свойство относительного позиционирования. После этого дочерний блок будет позиционироваться уже относительно своего родителя, а не относительно элемента body.

.head{

height: 250px;

position:relative;

}

.car{

position:absolute;

left:0;

top:0;

}

Позиционирование в CSS

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

При этом заметьте, что элемент уже вне потока документа, т.е. другие элементы его попросту «не замечают» — автомобиль перекрывает ссылку, игнорируя свойство обтекания float:left. Отлично, мы спозиционировали картинку относительно родителя. Осталось подивнуть ее на определенное количество пикселей от левой и верхней границ родителя (атрибуты left-top). Здесь можно взять соответствующие координаты из макета фотошопа или использовать другие удобные инструменты… или просто выровняв картинку «на глаз».

.car{

position:absolute;

left:450px;

top:140px;

}

И мы добиваемся необходимого результата:

Позиционирование в CSS

Ничего сложного нет. Поскольку макет я взял из вопроса пользователя — я не буду его прикладывать к дополнительным материалам. Практически аналогичный макет Вы можете найти в нашем курсе – Как нарисовать обалденный дизайн сайта с нуля, сверстать его и установить на WordPress

Для закрепления материала давайте решим следующую задачу, используя возможности позиционирования. Итак:

1. Необходимо разместить блок со строго заданными размерами по центру документа.
2. В этом блоке необходимо спозиционировать дочерний блок относительно его родителя.
3. Также необходимо создать блок, который должен быть прижат к левой границе браузера и при этом его положение должно быть фиксированным, т.е. он должен оставаться на месте, несмотря на возможную прокрутку документа.

Начнем с первого. Имеем блок со следующими размерами: ширина — 500 пикселей, высота — 300 пикселей. Необходимо центрировать этот блок относительно окна браузера. Вполне очевидно, что здесь мы должны воспользоваться относительными величинами (процентами), поскольку разрешение у каждого конкретного пользователя может отличаться — это и 1024*768, и 1440*900, и масса прочих.

Указываем разметку блока:

<div class=«block»></div>

Его стили:

.block{

width:500px;

height:300px;

border:1px solid red;

position:absolute;

left:50%;

top:50%;

}

Если посмотреть результат в браузере, то увидим, что сейчас центрирована левая верхняя точка блока. Это логично, поскольку эта точка является своеобразным началом системы координат блока. И именно эту точку мы отодвинули от левого верхнего угла браузера на 50% (left:50%; top:50%). Мы центрировали вершину блока, но каким образом центрировать блок? Здесь все просто. Для реализации задуманного мы воспользуемся отступами (свойство margin) и подвинем блок вверх на половину его высоты и влево на половину ширины. Таким образом, мы получим центр самого блока, который и совпадет с центром документа:

.block{

width:500px;

height:300px;

border:1px solid red;

position:absolute;

left:50%;

top:50%;

margin:—150px 0 0 —250px;

}

Теперь второе задание. Здесь просто. Создаем разметку дочернего блока:

<div class=«block»>

<div class=«child»></div>

</div>

И его стили:

.child{

width:200px;

height:100px;

border:1px solid #000;

position:absolute;

left:100px;

top:50px;

}

Ничего нового здесь нет — все тоже мы делали с автомобилем за тем исключением, что здесь родительский блок имеет свойство position:absolute (в первом примере для родителя мы устанавливали position:relative). Однако здесь мы все равно получили нужный результат, поскольку неважно какое свойство задано для родителя (absolute или relative) — дочерний блок все равно будет позиционирован относительно родителя.

И последнее задание. Со свойством position:fixed мы пока что не работали, но ничего сложного там также нет. Данное свойство очень похоже на position:absolute за одним исключением: элемент с таким свойством «привязывается» к точке окна браузера с указанными координатами.

Создаем разметку:

<div class=«block»>

<div class=«child»></div>

</div>

<div class=«fix»></div>

И стили:

.fix{

width:20px;

height:150px;

border:1px solid #000;

position:fixed;

top:200px;

left:0;

}

Таким образом, мы указали, что блок всегда будет прилегать к левой границе документа (left:0;) и всегда будет иметь отступ от верхней границы 200 пикселей (top:200px;). Для того, чтобы убедиться в этом, достаточно увеличить высоту блока с классом block для получения полосы прокрутки. Теперь, если прокручивать документ, фиксированный блок всегда будет занимать одну и ту же позицию относительно окна браузера.

Вот и все. Как и говорил, ничего сложного в свойсте position нет, но используя это свойство можно создавать сайты с довольно сложным дизайном. На этом наш урок завершен. Ваши вопросы и отзывы всегда будем рады видеть в комментариях. Удачи в Ваших разработках и до новых встреч!

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Источник

Добавление изображений на страницу — типовая задача веб-разработчиков. Её можно выполнить разными способами: вставить картинку в разметку через теги <img>, <svg> или использовать в CSS с помощью background-image.

Вставка изображений в теге <img>

Для каких изображений подходит: для логотипов, фото, иллюстраций, графиков и других контентных изображений.

💡 Контентные изображения тесно связаны по смыслу с содержимым страницы и дополняют его. Например, к таким изображениям относятся фото сотрудников в разделе «О нас» или схема проезда к отелю.

Чтобы вставить изображение с помощью <img>, нужно добавить в тег четыре обязательных атрибута:

  • src — указывает путь до картинки;
  • alt — добавляет альтернативный текст, который отображается, если изображение не загрузилось;
  • width — задаёт ширину изображения;
  • height — задаёт высоту изображения.
<img src="images/keks.jpg" alt="Рыжий кот Кекс лежит у ноутбука." width="1024" height="683">

С помощью такого кода можно вставить фото кота Кекса шириной 1024px и высотой 683px.

Рыжий кот Кекс лежит у ноутбука

Вставка через <svg>

Для каких изображений подходит: для векторных в формате SVG.

С помощью этого способа вы можете добавить иконки, чтобы затем менять их состояние.

Иконки

Иконки добавляются с помощью тега <svg>, в котором прописываются размеры изображения. Например, иконку VK из примера выше можно вставить так: 

<a href="https://vk.com/">
  <svg width="30" height="30">
    <path d="..."/>
  </svg>
  <span class="visually-hidden">Вконтакте</span>  
</a>

Небольшое отступление. Возможно, вы не знакомы с классом
visually-hidden — его добавляют элементам, которые нужно скрыть в интерфейсе. В нашем случае <span> с таким классом создаёт подпись «Вконтакте». Её смогут прочитать скринридеры, но не увидят пользователи. Добавлять такие подписи к иконкам — хорошая практика.

Вставка через CSS

Для каких изображений подходит: для декоративных.

💡 Декоративные изображения нужны для украшения страницы. Их отсутствие не поменяет смысл контента, поэтому они имеют только оформительское назначение.

Есть два способа вставить декоративное изображение: сделать фоном или добавить как псевдоэлемент.

Добавление фоновых изображений

Пример фонового изображения

Пример фонового изображения. Источник

Для добавления фоновых изображений используется CSS-свойство background-image. Вместе с ним нужно прописать размеры изображения — width и height.

Например, на странице есть контейнер с классом .image-container:

<div class="image-container"></div>

Чтобы задать ему фон, нужно написать следующий код:

.image-container {
  background-image: url("images/keks.jpg");
  width: 600px;
  height: 400px;
}

Это минимальный набор CSS-правил. Часто фронтендеры используют дополнительные правила, чтобы изменить позицию и размеры изображения или запретить повтор фоновой картинки.

CSS-свойство background-attachment указывает, что делать с изображением: зафиксировать его позицию в области просмотра или пролистывать вместе с содержимым контейнера.

Его значения:

  • scroll — значение по умолчанию. Фон прокручивается вместе с содержимым.
  • fix — фон фиксируется.
  • local — фон фиксируется с учётом содержимого элемента.

CSS-свойство background-position управляет расположением фона по осям X и Y, то есть по вертикали и горизонтали. Ему можно задавать значения, используя ключевые слова, процентные значения или конкретные величины, например, 100px.

Ключевые слова для расположения по оси X:

  • right — право;
  • left — лево.

Ключевые слова для расположения по оси Y:

  • top — сверху;
  • bottom — снизу.

Можно сочетать разные значения:

background-position: 100px top; /* фон отступит 100px от левого края, останется сверху*/
background-position: 50% bottom; /* фон будет посередине и снизу*/
background-position: left 100px; /* фон будет слева и отступит 100px от верхнего края*/

Если нужно задать положение только по одной оси, используйте свойства background-position-x и background-position-y. Они принимают такие же значения, как и background-position.

Следующее CSS-свойство — background-repeat, оно задаёт повтор изображения. По умолчанию у свойства стоит значение repeat, то есть фоновое изображение повторяется по вертикали и горизонтали:

Облака в небе

Чтобы изменить это поведение, надо поменять значение:

  • no-repeat — не повторять изображение,
  • repeat-x — повторять только по горизонтали
  • repeat-y — повторять только по горизонтали.

CSS-свойство background-size определяет размеры изображения. Ему также можно задавать значения в виде ключевых слов, процентов или конкретных размеров.

background-size: /*размер по ширине*/ /*размер по высоте*/

Ключевые слова:

  • auto — оставляет исходный размер изображения.
  • contain — масштабирует изображение по ширине или высоте, чтобы оно заполнило контейнер. Картинка при этом не обрезается.
  • cover — масштабирует изображение, сохраняя пропорции изображения. Картинка может обрезаться.

Чтобы было понятнее, посмотрим на примере. Оранжевыми рамками выделена область контейнера. Когда мы задали свойство background-size со значением contain, картинка заполнила всю высоту контейнера и осталась целой.

Котик Кекс лежит на кроватке, вокруг оранжевая рамка

А когда мы задали cover, фото Кекса обрезалось и растянулось на всю ширину контейнера.

Котик Кекс лежит на кроватке

Есть и другие CSS-свойства. Почитайте о них в спецификации W3C.

При использовании фоновых изображений обязательно добавляйте цветной фон-подложку, особенно если у вас на сайте белый текст. Это важно, ведь у пользователей может быть плохое интернет-соединение, при котором картинки долго загружаются. Тогда посетители сайта увидят белый текст на белом экране.

Пример проека карточки проека Седона в трёх вариантах

Использование псевдоэлементов

Небольшие декоративные элементы добавляются с помощью псевдоэлементов ::before и ::after. Эти псевдоэлементы создают внутри элемента псевдотег, который можно стилизовать. Например, вы можете добавить ему фоновое изображение или текст.

💡 Этот псевдотег — виртуальный, вы не увидите его в разметке сайта.

Псевдоэлемент ::before добавляет псевдотег в начале, ::after — в конце. Вот пример использования псевдоэлемента на сайте HTML Academy. Перед вами блок с тремя тегами <p>. В каждом из них лежат <strong> для важных цифр и <span> для обычного текста. Когда мы добавляем абзацу ::before, внутри <p> появляется ещё один псевдотег — с картинкой.

Пример карточек с псевдоэлементом

Принцип добавления картинки похож на тот, что мы рассматривали при вставке фоновых изображений. Только здесь мы добавляем фон не контейнеру, а псевдотегу:

<p class="wrapper">
  <! -- псевдоэлемент с фоновой картинкой -->
  <srtong>1507</strong>
  <span>Заданий и испытаний</span>
</p>
.wrapper::before {
  content: "";
  width: 600px;
  height: 400px;
  display: block;
  background-image: url("images/keks.jpg");
  background-repeat: no-repeat;
  background-position: center;
}

Разберём, что мы делаем.

Указываем содержимое. Мы используем свойство content с пустым значением, чтобы псевдоэлемент отобразился на странице. Обычно значением этого свойства является текст, но так как нам нужна только фоновая картинка, ставим значение "".

Делаем псевдоэлемент блочным. Прописываем размеры: ширину и высоту.

Добавляем фон. Указываем путь до картинки, убираем повтор и размещаем изображение по центру.

Заключение

Мы рассмотрели четыре основных способа вставки изображения. Первый выглядит самым простым, но он не всегда уместен. Поэтому выбирайте метод вставки, ориентируясь не на простоту работы, а на задачу и тип изображения. Например, логотип лучше добавлять с помощью <img>, а красивую фоновую картинку можно вставить с помощью
background-image.

Следуйте этому правилу, и пользователи полюбят ваш сайт.

Другие статьи о графике

  • Как отличить контентное изображение от декоративного
  • Растровая и векторная графика
  • Как вставлять SVG
  • Где скачать бесплатные фотографии для сайта
Источник


Здравствуй, дорогой хабрадруг! В интернете можно найти множество примеров отличного применения трансформаций и переходов в CSS3. В этой статье мы обратимся к основам основ CSS3 и научимся создавать что-то вроде этого. Данный туториал будет полезен тем, кто только начал знакомиться с CSS3. Давай-те же начнем!

Система координат

Чтобы легче понять то, как устроено перемещение объекта, мы будем работать в системе координат.

Однако наша система координат имеет одну особенность: ось Y направлена в противоположную сторону, чем обычно. Почему? Дело в том, что HTML и CSS (наравне, например, с ActionScript) используют обратную систему координат, так как веб-страница начинается с левого верхнего угла и идет вниз.
Заметка: Мы будем полагать, что вы уже знакомы со структурой HTML и CSS. Я пропущу объяснения того, как настроить файл CSS, как разместить картинки и т.д. Мы сфокусируемся на анимировании изображений. Если вы не уверены в том, что ваши навыки на высоком уровне, то советуем взглянуть на курс уроков «HTML и CSS за 30 дней» (бесплатно и на английском языке), чтобы выучить все необходимое.

1: Горизонтальное перемещение

Первое перемещение, которое мы продемонстрируем — горизонтальное. Мы будем двигать объекты слева направо и справа налево.

Двигаемся вправо

Чтобы переместить объект мы будем использовать transform: translate(x,y), где X — положительное число, а Y=0.

HTML
Откройте ваш любимый редактор кода и введите следующее:

<div id="axis" class="one">
<img class="object van move-right" src="images/van-to-right.png" alt="" /></div>

Мы определили три класса к картинке:

  • object: Установление главных правил нашего объекта.
  • van: Мы будем использовать различные объекты для демонстрации каждого вида анимации.
  • move-right: Используя этот класс, мы будем двигать наш объект.

CSS
Во-первых, мы разместим наш объект (картинку грузовика) по центру.

.object {
    position: absolute;
}
.van {
    top: 45%;
    left: 44%;
}

В этом примере мы подвинем объект на 350px вправо. Использован синтаксис transform: translate(350px,0);. Кроме того объект будет двигаться только при наведении на него курсора: #axis:hover .move-right.

#axis:hover .move-right{
    transform: translate(350px,0);
    -webkit-transform: translate(350px,0); /** Chrome & Safari **/
    -o-transform: translate(350px,0); /** Opera **/
    -moz-transform: translate(350px,0); /** Firefox **/
}

Параметр transform всего лишь переместит объект из одной точки в другую, но не создаст анимацию данного перемещения. Чтобы исправить это, нужно добавить параметр перемещения в классе .object.

.object {
    position: absolute;
    transition: all 2s ease-in-out;
    -webkit-transition: all 2s ease-in-out; /** Chrome & Safari **/
    -moz-transition: all 2s ease-in-out; /** Firefox **/
    -o-transition: all 2s ease-in-out; /** Opera **/
}

Это правило перемещение скажет браузеру анимировать все параметры объекта на 2 секунды (без задержки) с помощью функции ease-in-out.
Мы можем использовать 6 различных функций хронометража перемещений:

  • linear: перемещение происходит постоянной скоростью от начала и до конца.
  • ease: перемещение начинается медленно и затем набирает скорость.
  • ease-in: перемещение начинается медленно.
  • ease-out: перемещение заканчивается медленно.
  • ease-in-out: перемещение начинается и заканчивается медленно.
  • cubic-bezier: ручное определение значения перемещения.

Посмотреть ДЕМО

Двигаемся влево

Чтобы переместить объект влево, нужно просто поставить отрицательное значение к оси ОХ, в то время как Y остается неизменным. В нашем случае мы переместим объект на —350px влево.

HTML
Создайте новый документ html и вставьте следующий код:

<div id="axis" class="two">
    <img class="object van move-left" src="images/van-to-left.png"/>
</div>

На этот раз мы используем класс move-left, чтобы переметить объект влево.

CSS
Теперь введем -350px для оси OX. transform: translate(-350px,0); — переместим объект влево.

#axis:hover .move-left {
    transform: translate(-350px,0);
    -webkit-transform: translate(-350px,0); /** Safari & Chrome **/
    -o-transform: translate(-350px,0); /** Opera **/
    -moz-transform: translate(-350px,0); /** Firefox **/
}

Так как ранее мы уже определяли правила перемещения, нам не нужно делать это снова.
Посмотреть ДЕМО

2: Вертикальное перемещение

Перемещение объекта по вертикали не составит особого труда, ведь оно идентично горизонтальному. Единственная разница заключается в том, что мы будем иcпользовать значение -y для перемещения вверх и значение y для перемещения вниз.

Двигаемся вверх

HTML
Шаблон HTML идентичен предыдущим примерам. Однако, мы заменим наш объект ракетой (для наглядности) и назначим класс move-up.

<div id="axis">
    <img class="object rocket move-up" src="images/rocket.png"/>
</div>

CSS
Так же как и грузовик, мы разместим ракету по центру:

.rocket {
    top: 43%;
    left: 44%;
}

Как мы отметили ранее, координата Y должна быть отрицательной. В нашем случае мы подвинем объект на 350px вверх.

#axis:hover .move-up {
    transform: translate(0,-350px);
    -webkit-transform: translate(0,-350px);
    -o-transform: translate(0,-350px);
    -moz-transform: translate(0,-350px);
}

Посмотреть ДЕМО

Двигаемся вниз

Как вы догадались, чтобы переместить объект вниз, координата Y должна быть положительной, а X равняться 0. Синтаксис: translate(0,y);

HTML

<div id="axis" class="four">
<img class="object coin move-down" src="images/coin.png"/>
</div>

CSS

#axis:hover .move-down {
    transform: translate(0,350px);
    -webkit-transform: translate(0,350px);
    -o-transform: translate(0,350px);
    -moz-transform: translate(0,350px);
}

Посмотреть ДЕМО

3: Диагональное перемещение

Чтобы переместить объект по диагонали, мы совместим параметры x и y. Синтаксис будет следующим: transform: translate(x,y). В зависимости от направления, значение x и y может быть как положительным, так и отрицательным.

HTML

<div id="axis" class="five">
<img class="object plane move-ne" src="images/paper-plane.png"/>
</div>

CSS

#axis:hover .move-ne {
    transform: translate(350px,-350px);
    -webkit-transform: translate(350px,-350px);
    -o-transform: translate(350px,-350px);
    -moz-transform: translate(350px,-350px);
}

Посмотреть ДЕМО

4: Вращение

Вращение в CSS3 регулируется градусными координатами (от 0° до 360°). Чтобы повернуть объект, примените следущие параметры: transform: rotate(ndeg); где n — градусы.

Вращение по часовой стрелке

Для того чтобы повернуть объект по часовой стрелке, применим положительное значение для rotate(ndeg).

HTML

<div id="axis" class="six">
<img class="object pencil rotate360cw" src="images/pencil.png"/>
</div>

CSS

#axis:hover .rotate360cw {
    transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
}

Вращение против часовой стрелки

Для того чтобы повернуть объект против часовой стрелки, применим отрицательное значение для rotate(ndeg).

HTML

<div id="axis" class="seven">
<img class="object pencil rotate360ccw" src="images/pencil.png"/>
</div>

CSS

#axis:hover .rotate360ccw {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
}

Посмотреть ДЕМО

5: Масштабирование

Масштабирование — это интересная особенность CSS3. Используя параметр scale(n) или параметр scale(x,y), мы можем либо увеличивать, либо уменьшать объект непосредственно в рамках HTML. Объект будет менять размер в зависимости от значения n/x,y, где ось X — ширина, а Y — высота.
Давайте посмотрим на следующий пример.

HTML

<div id="axis" class="eight">
<img class="object car larger" src="images/car.png"/>
</div>

CSS

#axis:hover .larger{
    transform: scale(2);
    -webkit-transform: scale(2);
    -o-transform: scale(2);
    -moz-transform: scale(2);
}

Посмотреть ДЕМО

6: Множественные движения

После того как мы рассмотрели основные движения и трансформации, мы можем попробовать комбинировать их.

HTML

<div id="axis" class="ten">
<img class="object boomerang multiple-move" src="images/pencil.png"/>
</div>

CSS
План таков: нужно переместить бумеранг в правый верхний угол и одновременно вращать его. Для этого нужно просто перечислить команды через пробел.

#axis:hover .multiple {
    transform: translate(350px, -350px) rotate(360deg);
    -webkit-transform: translate(350px, -350px) rotate(360deg);
    -o-transform: translate(350px, -350px) rotate(360deg);
    -moz-transform: translate(350px, -350px) rotate(360deg);
}

Посмотреть ДЕМО

Заключение

Итак, в этой статье мы рассмотрели основные примеры трансформации. Помните, что нужно обращать внимание на совместимость с различными браузерами. И не переусердствуйте с этими эффектами, ведь они могут не только не улучшить ваш дизайн, но и испортить его.

Скачать исходники

Источник

Понравилась статья? Поделить с друзьями:
  • Html как изменить местоположение кнопки
  • Html как изменить межстрочный интервал
  • Html как изменить масштаб картинки
  • Html webpack plugin error child compilation failed module createrequire is not a function
  • Http error 403 что это значит как исправить