Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

АдаптивныС изобраТСния — Π˜Π·ΡƒΡ‡Π΅Π½ΠΈΠ΅ Π²Π΅Π±-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ

Π’ Π΄Π°Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ ΠΈΠ·ΡƒΡ‡ΠΈΠΌ ΠΊΠΎΠ½Ρ†Π΅ΠΏΡ†ΠΈΡŽ Π³ΠΈΠ±ΠΊΠΈΡ…Β (responsive) ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉΒ β€” Ρ‚Π°ΠΊΠΈΡ…, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Ρ…ΠΎΡ€ΠΎΡˆΠΎ Π½Π° устройствах с сильно ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‰ΠΈΠΌΠΈΡΡ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ экрана, Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ характСристиками β€” ΠΈ рассмотрим инструмСнты, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅Β  ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ Π² HTML для ΠΈΡ… Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ.Β Responsive images — Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄Π½Π° Ρ‡Π°ΡΡ‚ΡŒ (ΠΈ Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π΅ Π½Π°Ρ‡Π°Π»ΠΎ) Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°, Ρ‚Π΅ΠΌΡ‹, которая Π±ΡƒΠ΄Π΅Ρ‚ рассмотрСна ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½Π΅Π΅ Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ ΠΌΠΎΠ΄ΡƒΠ»Π΅ Π½Π° Ρ‚Π΅ΠΌΡƒΒ CSS.

ΠšΠ°ΠΊΡƒΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ ΠΌΡ‹ пытаСмся Ρ€Π΅ΡˆΠΈΡ‚ΡŒ адаптивными изобраТСниями? Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Ρ‚ΠΈΠΏΠΈΡ‡Π½Ρ‹ΠΉ сцСнарий. ΠžΠ±Ρ‹Ρ‡Π½Ρ‹ΠΉ Π²Π΅Π±-сайт ΠΌΠΎΠΆΠ΅Ρ‚Β ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒΒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅, для ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Π²ΠΈΠ·ΡƒΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ восприятия ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, Π° Ρ‚Π°ΠΊΠΆΠ΅ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅ ΠΏΠΎΠ΄ Π½ΠΈΠΌ. Π’Ρ‹, вСроятно, Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΎ всю ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΎΠΊΠ½Π°, Π° изобраТСния Π² ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Π»ΠΈΡΡŒ Π³Π΄Π΅-Ρ‚ΠΎ Π²Π½ΡƒΡ‚Ρ€ΠΈ ΠΊΠΎΠ»ΠΎΠ½ΠΊΠΈ с ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ. Π”Π°Π²Π°ΠΉΡ‚Π΅ посмотрим Π½Π° ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ простой ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Вакая вёрстка Ρ…ΠΎΡ€ΠΎΡˆΠΎ выглядит Π½Π° ΡˆΠΈΡ€ΠΎΠΊΠΎΡ„ΠΎΡ€ΠΌΠ°Ρ‚Π½Ρ‹Ρ… экранах Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΎΠ² ΠΈ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ПК,Β (Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒΒ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ Π΄Π΅ΠΌΠΎ-ΠΏΡ€ΠΈΠΌΠ΅Ρ€Β ΠΈ Π½Π°ΠΉΡ‚ΠΈ исходный ΠΊΠΎΠ΄Β Π½Π°Β Github.) ΠœΡ‹ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ CSS, скаТСм Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

  • Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠΌΡƒΒ Ρ‚Π΅Π³Π° mainΒ Π·Π°Π΄Π°Π½Π° максимальная ΡˆΠΈΡ€ΠΈΠ½Π°Β 1200 пиксСлСй. Если ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π²Ρ‹ΡˆΠ΅ этой ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Ρ‚ΠΎ содСрТимоС сайта остаСтся Π½Π° 1200 пиксСлСй ΠΈ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ сСбя Π² доступном пространствС. Если ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Π½ΠΈΠΆΠ΅ этой ΡˆΠΈΡ€ΠΈΠ½Ρ‹, содСрТимоС устанавливаСтся Π² 100% ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана.
  • Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² шапкС всСгда Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ Ρ‚Π΅Π³Π° header Π²Π½Π΅ зависимости ΠΎΡ‚ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°. Если сайт Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒΡΡ Π½Π° ΡƒΠ·ΠΊΠΈΡ… экранах, Ρ‚ΠΎ Π²Π°ΠΆΠ½Ρ‹Π΅ Π΄Π΅Ρ‚Π°Π»ΠΈ Π² Ρ†Π΅Π½Ρ‚Ρ€Π΅ изобраТСния (люди) всС Ρ€Π°Π²Π½ΠΎ Π±ΡƒΠ΄ΡƒΡ‚ Π²ΠΈΠ΄Π½Ρ‹. ВсС, Ρ‡Ρ‚ΠΎ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ экрана Π±ΡƒΠ΄Π΅Ρ‚ скрыто. Высота шапки 200 пиксСлСй.
  • Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ Π² содСрТимом Π·Π°Π΄Π°Π½Ρ‹ Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ Ссли ΡˆΠΈΡ€ΠΈΠ½Π° body становится мСньшС Ρ‡Π΅ΠΌ ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния, Ρ‚ΠΎ изобраТСния Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ ΡΠΆΠΈΠΌΠ°Ρ‚ΡŒΡΡ ΠΈ ΠΎΡΡ‚Π°ΡŽΡ‚ΡΡ всСгда Π²Π½ΡƒΡ‚Ρ€ΠΈ body ΠΈ Π½Π΅ Π²Ρ‹ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‚Β Π·Π° Π΅Π³ΠΎ ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹.

Всё Ρ…ΠΎΡ€ΠΎΡˆΠΎ, ΠΎΠ΄Π½Π°ΠΊΠΎΒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ΡΡ, ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ просматриваСтС сайт Π½Π° устройствС с нСбольшим экраном – шапка Π²Π½ΠΈΠ·Ρƒ выглядит Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎ, Π½ΠΎΒ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ ΠΎΠ½Π° Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽΒ Π²Ρ‹ΡΠΎΡ‚ΡƒΒ ΡΠΊΡ€Π°Π½Π°;Β ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π΅ Π½Π°ΠΏΡ€ΠΎΡ‚ΠΈΠ², выглядит уТасно – ΠΏΡ€ΠΈ Ρ‚Π°ΠΊΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ Π΅Π΄Π²Π° ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°ΡΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ людСй!

Π‘Ρ‹Π»ΠΎ Π±Ρ‹ Π½Π°ΠΌΠ½ΠΎΠ³ΠΎ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ изобраТСния, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ Π²ΠΈΠ΄Π½Ρ‹ Π²Π°ΠΆΠ½Ρ‹Π΅ Π΄Π΅Ρ‚Π°Π»ΠΈ снимка, ΠΊΠΎΠ³Π΄Π° сайт отобраТаСтся Π½Π° ΡƒΠ·ΠΊΠΎΠΌ экранС, ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ срСднСС ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½Ρ‹ΠΌ ΠΈ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΌ изобраТСниями для экранов срСднСй ΡˆΠΈΡ€ΠΈΠ½Ρ‹, Ρ‚Π°ΠΊΠΈΡ…Β ΠΊΠ°ΠΊ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Ρ‹ – это извСстно ΠΊΠ°ΠΊΒ 

art direction problem.

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ, Π½Π΅Ρ‚ Π½ΡƒΠΆΠ΄Ρ‹ Π²ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒ Ρ‚Π°ΠΊΠΈΠ΅ большиС изобраТСния Π½Π° страницу, Ссли она просматриваСтся Π½Π° малСньком экранС мобильного устройства; это называСтся resolution switching problemΒ β€” растровоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ прСдставляСт собой Ρ‚ΠΎΡ‡Π½ΠΎ-Π·Π°Π΄Π°Π½Π½ΠΎΠ΅ количСство пиксСлСй ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΈ высотС; ΠΊΠ°ΠΊ ΠΌΡ‹ успСли Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, ΠΊΠΎΠ³Π΄Π° Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Π»ΠΈΒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΡƒΡŽ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ, растровоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ становится зСрнистым ΠΈ выглядит уТасно, Ссли ΠΎΠ½ΠΎ отобраТаСтся Π² Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ большСм, Ρ‡Π΅ΠΌ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ (Ρ‚ΠΎΠ³Π΄Π° ΠΊΠ°ΠΊ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅Ρ‚).Β Π’ Ρ‚ΠΎ ΠΆΠ΅ врСмя, Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ отобраТаСтся Π² Π³ΠΎΡ€Π°Π·Π΄ΠΎ мСньшСм Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅, Ρ‡Π΅ΠΌ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½Ρ‹ΠΉ, это ΠΏΡ€ΠΈΠ²Π΅Π΄Ρ‘Ρ‚ ΠΊ напрасной Ρ‚Ρ€Π°Ρ‚Π΅ Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ° β€” ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств Π±ΡƒΠ΄ΡƒΡ‚ Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ большоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π°, вмСсто малСнького для ΠΈΡ… устройства. ИдСально Π±Ρ‹Π»ΠΎ Π±Ρ‹ ΠΈΠΌΠ΅Ρ‚ΡŒ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΎΒ Ρ„Π°ΠΉΠ»ΠΎΠ²Β Π² Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡΡ…, ΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΒ Π½ΡƒΠΆΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π² зависимости ΠΎΡ‚ устройства, ΠΎΠ±Ρ€Π°Ρ‰Π°ΡŽΡ‰Π΅Π³ΠΎΡΡ ΠΊ Π²Π΅Π±-сайту.

Π‘Π»ΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Π² Ρ‚ΠΎΠΌ, Ρ‡Ρ‚ΠΎ для Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… устройств с большим Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ экрана Π½ΡƒΠΆΠ½Ρ‹ изобраТСния большСго Ρ‡Π΅ΠΌ оТидаСтся Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Ρ‡Π΅Ρ‚Ρ‡Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π»ΠΎΡΡŒ. По сути это всё одна Π·Π°Π΄Π°Ρ‡Π°Β Π² Ρ€Π°Π·Π½Ρ‹Ρ… условиях.

МоТно ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½Ρ‹Π΅ изобраТСния ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эти ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹. Π’ ΠΊΠ°ΠΊΠΎΠΉ-Ρ‚ΠΎ стСпСни это Ρ‚Π°ΠΊ. Π£ Π½ΠΈΡ… нСбольшой вСс ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€, поэтому ΠΈΡ… ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΡ‡Ρ‚ΠΈ Π² любом случаС. Они Ρ…ΠΎΡ€ΠΎΡˆΠΈ для простой Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΡƒΠ·ΠΎΡ€ΠΎΠ², элСмСнтов интСрфСйса ΠΈ Ρ‚. Π΄. Π‘Π»ΠΎΠΆΠ½Π΅Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с большим количСством Π΄Π΅Ρ‚Π°Π»Π΅ΠΉ, ΠΊΠ°ΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° Ρ„ΠΎΡ‚ΠΎ. РастровыС изобраТСния (JPEG) для нашСго ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° подходят большС.Β 

Π’Π°ΠΊΠΎΠ³ΠΎ Ρ€ΠΎΠ΄Π° ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ Π½Π΅ Π±Ρ‹Π»ΠΎ Π² Π½Π°Ρ‡Π°Π»Π΅ сущСствования Π²Π΅Π±Π°, Π² ΠΏΠ΅Ρ€Π²ΠΎΠΉ ΠΏΠΎΠ»ΠΎΠ²ΠΈΠ½Π΅ 90-Ρ… Π³ΠΎΠ΄ΠΎΠ² – Ρ‚ΠΎΠ³Π΄Π° СдинствСнными устройствами для просмотра Π²Π΅Π±-страниц Π±Ρ‹Π»ΠΈ Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Π΅ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Ρ‹ ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊΠΈ, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ создатСли Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² ΠΈ Π°Π²Ρ‚ΠΎΡ€Ρ‹ спСцификаций Π΄Π°ΠΆΠ΅ Π½Π΅ Π·Π°Π΄ΡƒΠΌΡ‹Π²Π°Π»ΠΈΡΡŒΒ ΠΎ создании Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. Π’Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈΒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉΒ Π±Ρ‹Π»ΠΈ Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π½Ρ‹ Π½Π΅Π΄Π°Π²Π½ΠΎ для Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ, ΡƒΠΊΠ°Π·Π°Π½Π½Ρ‹Ρ… Π²Ρ‹ΡˆΠ΅.Β ΠžΠ½ΠΈΒ ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚Β Π²Π°ΠΌ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠ°ΠΆΠ΄ΠΎΠ΅ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅, Π½ΠΎ содСрТит Ρ€Π°Π·Π½ΠΎΠ΅ количСство пиксСлСй (

resolution switching), ΠΈΠ»ΠΈ Ρ€Π°Π·Π½Ρ‹Π΅ изобраТСния с ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ областями основного изобраТСния (art direction).

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: НовыС возмоТности ΠΎΠ±ΡΡƒΠΆΠ΄Π°ΡŽΡ‚ΡΡ Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅Β β€” srcset/sizes/<picture> β€” всС ΠΎΠ½ΠΈ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ послСдними вСрсиями соврСмСнных Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠ² (Π²ΠΊΠ»ΡŽΡ‡Π°Ρ Microsoft Edge, Π½ΠΎ Π½Π΅ Internet Explorer).

Π’ этом Ρ€Π°Π·Π΄Π΅Π»Π΅ рассмотрим Π΄Π²Π΅ Π²Ρ‹ΡˆΠ΅ΠΎΠΏΠΈΡΠ°Π½Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ ΠΈ ΠΏΠΎΠΊΠ°ΠΆΠ΅ΠΌ, ΠΊΠ°ΠΊ ΠΈΡ… Ρ€Π΅ΡˆΠΈΡ‚ΡŒ с использованиСм инструмСнтов HTML <img>. Как ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½Π° ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅ — ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ°ΠΊ ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΠ΅ сайта ΠΈ установлСно ΠΊΠ°ΠΊ Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽΒ CSS. CSS большС ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚ для Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Π° Ρ‡Π΅ΠΌΒ HTML, ΠΎΠ± этом ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ ΠΌΠΎΠ΄ΡƒΠ»Π΅ ΠΎ CSS.

Π Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ: Π Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹

Π˜Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊΡƒΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ Ρ€Π΅ΡˆΠ°ΡŽΡ‚ Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ?Β Π’ зависимости ΠΎΡ‚ устройства Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈ Ρ‚ΠΎ ΠΆΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π½ΠΎ Ρ€Π°Π·Π½Ρ‹Ρ… Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ². ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚Π΅ Π½Π° Π²Ρ‚ΠΎΡ€ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅. Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹ΠΉ элСмСнт <img> ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ позволяСт ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΎΠ΄ΠΈΠ½Β  ΠΏΡƒΡ‚ΡŒ ΠΊ Ρ„Π°ΠΉΠ»Ρƒ:

<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Однако Π΅ΡΡ‚ΡŒ Π΄Π²Π° Π½ΠΎΠ²Ρ‹Ρ… Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Β β€” srcset and sizes β€” ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΡ… Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅Β ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ с ΠΏΠΎΠΌΠ΅Ρ‚ΠΊΠ°ΠΌΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π²Ρ‹Π±Ρ€Π°Π» подходящСС. ΠŸΡ€ΠΈΠΌΠ΅Ρ€ Π½Π° Github:Β responsive.htmlΒ (Ρ‚Π°ΠΊΠΆΠ΅ смотри источник ΠΊΠΎΠ΄Π°).

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
    
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Атрибуты srcset ΠΈ sizes каТутся слоТными, Π½ΠΎ ΠΎΠ½ΠΈ Π½Π΅ Ρ‚Π°ΠΊ ΠΏΠ»ΠΎΡ…ΠΈ, Ссли Π²Ρ‹ ΠΎΡ‚Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΈΡ€ΡƒΠ΅Ρ‚Π΅ ΠΈΡ… ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ Π²Ρ‹ΡˆΠ΅: ΠΊΠ°ΠΆΠ΄Π°ΡΒ Ρ‡Π°ΡΡ‚ΡŒ значСния атрибута с Π½ΠΎΠ²ΠΎΠΉ строки. Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ состоит ΠΈΠ· списка элСмСнтов Ρ‡Π΅Ρ€Π΅Π· Π·Π°ΠΏΡΡ‚ΡƒΡŽ, ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Ρ‚Ρ€ΠΈ части. Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим эти значСния:

srcsetΒ Π²ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ названия изобраТСний, срСди ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π²Ρ‹Π±Π΅Ρ€Π΅Ρ‚ Π½ΡƒΠΆΠ½ΠΎΠ΅Β ΠΈ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹.

Β ΠŸΠ΅Ρ€Π΅Π΄ ΠΊΠ°ΠΆΠ΄ΠΎΠΉ запятой части значСния Π² Ρ‚Π°ΠΊΠΎΠΌ порядкС:

  1. НазваниС изобраТСния (elva-fairy-480w.jpg.)
  2. ΠŸΡ€ΠΎΠ±Π΅Π».
  3. ΠΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈΒ Π² пиксСлах (480w) β€” Π·Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ здСсь ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡΒ w вмСсто px, ΠΊΠ°ΠΊ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ ΠΎΠΆΠΈΠ΄Π°Ρ‚ΡŒ.Β  Π­Ρ‚Π° настоящая ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния, которая ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ просмотрСна Π² свойствах ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° вашСм ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π½Π° Mac Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² FinderΒ ΠΈ Π½Π°ΠΆΠ°Ρ‚ΡŒΒ Β Cmd + IΒ , Ρ‡Ρ‚ΠΎΠ±Ρ‹ вывСсти ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ Π½Π° экран).

sizesΒ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΠ΅Ρ‚Β ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Π½ΡŒ ΠΌΠ΅Π΄ΠΈΠ°-Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана) ΠΈ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ изобраТСния, ΠΊΠΎΠ³Π΄Π° ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎΠ΅ ΠΌΠ΅Π΄ΠΈΠ°-Π²Ρ‹Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ истинно β€” это Ρ‚ΠΎ, ΠΎ Ρ‡Ρ‘ΠΌ ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠ»ΠΈ Π²Ρ‹ΡˆΠ΅. Π’ нашСм случаС, ΠΏΠ΅Ρ€Π΅Π΄ каТдой запятой ΠΌΡ‹ пишСм:

  1. МСдиа-условиС ((max-width:480px)) β€” Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ большС ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΎΠ± этом Π²Β CSS topic, Π½ΠΎ сСйчас Π΄Π°Π²Π°ΠΉΡ‚Π΅ скаТСм, Ρ‡Ρ‚ΠΎ ΠΌΠ΅Π΄ΠΈΠ°-условиС описываСт Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ состояниС экрана. Π’ этом случаС, ΠΌΡ‹ Π³ΠΎΠ²ΠΎΡ€ΠΈΠΌ «ΠΊΠΎΠ³Π΄Π° viewport width мСньшС ΠΈΠ»ΠΈΒ Ρ€Π°Π²Π΅Π½ 480 пиксСлям».
  2. ΠŸΡ€ΠΎΠ±Π΅Π».
  3. Π¨ΠΈΡ€ΠΈΠ½Ρƒ слота (Π² ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»Π΅ «width of the slot»), Π·Π°Π½ΠΈΠΌΠ°Π΅ΠΌΡƒΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ, ΠΊΠΎΠ³Π΄Π° ΠΌΠ΅Π΄ΠΈΠ°-условиС истинно. (440px)

Note: Для ΡˆΠΈΡ€ΠΈΠ½Ρ‹ слота, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒΒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Π΅ значСния (

px, em) ΠΈΠ»ΠΈ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅Β ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΎΠΊΠ½Π° просмотра (vw),Β Π½ΠΎ НЕ ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Ρ‹. Π’Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρƒ послСднСго слота Π½Π΅Ρ‚ ΠΌΠ΅Π΄ΠΈΠ°-условия — это Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ станСт Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½Ρ‹ΠΌ, Ссли Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΠΌΠ΅Π΄ΠΈΠ°-условий Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ истинно.Β Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΠ΅Ρ‚ всС ΠΏΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ послС ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ совпадСния, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Π±ΡƒΠ΄ΡŒΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Ρ‚Π΅Π»ΡŒΠ½Π΅Π΅ ΠΊ порядку ΠΈΡ… объявлСния.

Π˜Ρ‚Π°ΠΊ, с Ρ‚Π°ΠΊΠΈΠΌΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ сдСлаСт ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

  1. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚ Π½Π° ΡˆΠΈΡ€ΠΈΠ½Ρƒ экрана устройства.
  2. ΠŸΠΎΠΏΡ‹Ρ‚Π°Π΅Ρ‚ΡΡ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ подходящСС ΠΌΠ΅Π΄ΠΈΠ°-условиС из списка Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅Β sizes.
  3. ΠŸΠΎΡΠΌΠΎΡ‚Ρ€ΠΈΡ‚ Π½Π° Ρ€Π°Π·ΠΌΠ΅Ρ€ слота ΠΊ этому ΠΌΠ΅Π΄ΠΈΠ°-запросу.
  4. Π—Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠ· списка из 
    srcset
    , ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅Β ΠΈΠΌΠ΅Π΅Ρ‚ Ρ‚ΠΎΡ‚ ΠΆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ‡Ρ‚ΠΎ ΠΈ Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ слот, ΠΈΠ»ΠΈ, Ссли Ρ‚Π°ΠΊΠΎΠ³ΠΎ Π½Π΅Ρ‚, Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅Β Π±ΠΎΠ»ΡŒΡˆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π²Ρ‹Π±Ρ€Π°Π½Π½ΠΎΠ³ΠΎ слота.Β 

И это всё! На Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚, Ссли ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ с viewport width 480px Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ страницу, ΠΌΠ΅Π΄ΠΈΠ°-условиС (max-width: 480px)Β Π±ΡƒΠ΄Π΅Ρ‚ истинно, ΡΠ»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π±Ρ€Π°Π½ слот 440px, Ρ‚ΠΎΠ³Π΄Π° Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅Β elva-fairy-480w.jpg, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ свойство ΡˆΠΈΡ€ΠΈΠ½Ρ‹Β (480w) Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ Π±Π»ΠΈΠ·ΠΊΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅Β 440px. Условно, ΠΈΠ·ΠΎΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ 800pxΒ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ Π½Π° дискС 128KB,Β Π² Ρ‚ΠΎ врСмя ΠΊΠ°ΠΊ вСрсия Π² 480px Ρ‚ΠΎΠ»ΡŒΠΊΠΎ 63KB β€” экономия Π² 65KB. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ Ρƒ вас страница, Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ ΠΌΠ½ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ это Ρ‚Π΅Ρ…Π½ΠΈΠΊΡƒ, Π²Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚Π΅Β ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ ΠΏΡ€ΠΎΠΏΡƒΡΠΊΠ½ΡƒΡŽ ΡΠΏΠΎΡΠΎΠ±Π½ΠΎΡΡ‚ΡŒ.

Π‘Ρ‚Π°Ρ€Ρ‹Π΅ Π±Ρ€ΡƒΠ·Π΅Ρ€Ρ‹, Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‰ΠΈΠ΅ эти возмоТности, просто ΠΏΡ€ΠΎΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΡƒΡŽΡ‚ ΠΈΡ… ΠΈ Π²ΠΎΠ·ΡŒΠΌΡƒΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ адрСсу ΠΈΠ· Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° src.

Note: Π’ описании элСмСнта <head>Β Π²Ρ‹ Π½Π°ΠΉΠ΄Ρ‘Ρ‚Π΅ строку <meta name="viewport" content="width=device-width">: это заставляСт ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Ρ€Π΅Π°Π»ΡŒΠ½Ρ‹ΠΉ viewport width для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ web-страниц (Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ нСчСстны насчёт своСго viewport width, вмСсто этого ΠΎΠ½ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ страницу Π² большСм viewport width, Π° Π·Π°Ρ‚Π΅ΠΌ ΡƒΠΆΠΈΠΌΠ°ΡŽΡ‚ Π΅Ρ‘, Ρ‡Ρ‚ΠΎ Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ Ρ…ΠΎΡ€ΠΎΡˆΠΎ сказываСтся Π½Π° Π½Π°ΡˆΠΈΡ… ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… изобраТСниях или Π΄ΠΈΠ·Π°ΠΉΠ½Π΅. ΠœΡ‹ расскаТСм Π²Π°ΠΌ ΠΎΠ± этом большС Π² Π±ΡƒΠ΄ΡƒΡ‰Π΅ΠΌ ΠΌΠΎΠ΄ΡƒΠ»Π΅.)

ΠŸΠΎΠ»Π΅Π·Π½Ρ‹Π΅ инструмСнты Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°

Π•ΡΡ‚ΡŒ нСсколько полСзных браузСрных инструмСнтов разработчика,Β Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ с ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½ΠΈΠ΅ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ слотов ΠΈ Ρ‚. Π΄., ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ. Когда я Ρ€Π°Π±ΠΎΡ‚Π°Π» Π½Π°Π΄ Π½ΠΈΠΌΠΈ, я сначала Π·Π°Π³Ρ€ΡƒΠΆΠ°Π» Ρ„ΠΈΠΊΡΠΈΡ€ΠΎΠ²Π°Π½Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ ΠΌΠΎΠ΅Π³ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° (not-responsive.html), Π·Π°Ρ‚Π΅ΠΌ ΠΎΡ‚ΠΊΡ€Ρ‹Π²Π°Π»Β Responsive Design View (Tools > Web Developer > Responsive Design View), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСм Π²Π·Π³Π»ΡΠ½ΡƒΡ‚ΡŒ Π½Π° layout вашСй Π²Π΅Π±-страницы как Ссли Π±Ρ‹ ΠΎΠ½ΠΈ Π±Ρ‹Π»ΠΈ просмотрСны Ρ‡Π΅Ρ€Π΅Π· устройства с различными размСрами экрана.

Π― устанавливал viewport width Π½Π° 320px, Π·Π°Ρ‚Π΅ΠΌ Π½Π° 480px; для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ я обращался ΠΊΒ DOM Inspector, ΠΊΠ»ΠΈΠΊΠ°Π» ΠΏΠΎ элСмСнту <img> Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ ΠΌΡ‹ заинтСрСсованы, Π΄Π°Π»Π΅Π΅ смотрСл Ρ€Π°Π·ΠΌΠ΅Ρ€ Π²ΠΎ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅ Box Model с ΠΏΡ€Π°Π²ΠΎΠΉ стороны дисплСя. Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ изобраТСния

А дальшС Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π»ΠΈ srcset Ссли ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅Β viewport width Ρ‚Π°ΠΊΠΈΠΌ ΠΊΠ°ΠΊΠΈΠΌ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ ΡƒΠ·ΠΊΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ), ΠΎΡ‚ΠΊΡ€Ρ‹Π² Network Inspector (Tools > Web Developer > Network) ΠΈ Π·Π°Ρ‚Π΅ΠΌ ΠΏΠ΅Ρ€Π΅Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ страницу. Π­Ρ‚ΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π΄Π°Ρ‚ΡŒ Π²Π°ΠΌ ΠΏΠ΅Ρ€Π΅Ρ‡Π΅Π½ΡŒ рСсурсов ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±Ρ‹Π»ΠΈ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½Ρ‹ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ (ΡΠΎΠ±Ρ€Π°Ρ‚ΡŒ) web-страницу, ΠΈ Ρ‚ΡƒΡ‚ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ ΠΊΠ°ΠΊΠΎΠΉ Ρ„Π°ΠΉΠ» изобраТСния Π±Ρ‹Π» Π²Ρ‹Π±Ρ€Π°Π½ для Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ.

ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ: ΠžΠ΄ΠΈΠ½Π°ΠΊΠΎΠ²Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ€Π°Π·Π½Ρ‹Π΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ

Если Π²Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚Π΅ нСсколько Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ экрана, Π½ΠΎ всС видят вашС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² ΠΎΠ΄Π½ΠΎΠΌ ΠΈ Ρ‚ΠΎΠΌ ΠΆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ Π½Π° экранС, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π²Ρ‹Π±ΠΈΡ€Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ с подходящим Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ srcset с x-дисриптором ΠΈ Π±Π΅Π·Β sizes β€” Π±ΠΎΠ»Π΅Π΅ простой синтаксис! Найти ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΊΠ°ΠΊ это выглядит ΠΌΠΎΠΆΠ½ΠΎ здСсь srcset-resolutions.html (смотритС Ρ‚Π°ΠΊΠΆΠ΅ the source code):

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

Π’ Π΄Π°Π½Π½ΠΎΠΌ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅, ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ примСняСтся CSS Ρ‚Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΎ ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π² 320 пиксСлСй Π½Π° экранС (Ρ‚Π°ΠΊΠΆΠ΅ Π½Π°Π·Ρ‹Π²Π°ΠΌΠΎΠ΅ CSS-пиксСлями):

img {
  width: 320px;
}

Π’ этом случаС, Π½Π΅Ρ‚ нСобходимости Π² sizesΒ β€” Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ просто опрСдСляСт Π² ΠΊΠ°ΠΊΠΎΠΌ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ дисплСй ΠΈ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ подходящСС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² соотвСтствии с srcset. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, Ссли устройство, ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΠΎΠ΅ ΠΊ страницС, ΠΈΠΌΠ΅Π΅Ρ‚ дисплСй стандартного/Π½ΠΈΠ·ΠΊΠΎΠ³ΠΎ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ, ΠΊΠΎΠ³Π΄Π° ΠΎΠ΄ΠΈΠ½ пиксСль устройства прСдставляСт (соотвСтсвтуСт) ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ CSS-пиксСль, Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅Β elva-fairy-320w.jpg (ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ x1, Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π²Π°ΠΌ Π½Π΅ Π½Π°Π΄ΠΎ Π²ΠΊΠ»ΡŽΡ‡Π°Ρ‚ΡŒ Π΅Π³ΠΎ). Если устройство ΠΈΠΌΠ΅Π΅Ρ‚ высокоС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅, Π² Π΄Π²Π° пиксСля устройства Π½Π° ΠΊΠ°ΠΆΠ΄Ρ‹ΠΉ CSS-пиксСль ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅, Ρ‚ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅Β elva-fairy-640w.jpg. 640px ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈΠΌΠ΅Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ 93KB, Ρ‚ΠΎΠ³Π΄Π° Ρ‚Π°ΠΊΒ 320px ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ — всСго 39KB.

Π₯удоТСствСнноС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅

Подводя ΠΈΡ‚ΠΎΠ³ΠΈ,Β ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° худоТСствСнного оформлСния Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² ΠΆΠ΅Π»Π°Π½ΠΈΠΈ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ΠΎ соотвСтствовало Ρ€Π°Π·Π½Ρ‹ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌ отобраТСния изобраТСния. НапримСр, Ссли Π½Π° Π²Π΅Π±-сайтС отобраТаСтся большой ΠΏΠ΅ΠΉΠ·Π°ΠΆΠ½Ρ‹ΠΉ снимок с Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠΎΠΌ посСрСдинС ΠΏΡ€ΠΈ просмотрС Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π½Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½ΠΎΠΌ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅, Ρ‚ΠΎ ΠΏΡ€ΠΈ просмотрС Π²Π΅Π±-сайта Π² мобильном Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ ΠΎΠ½ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ; ΠΎΠ½ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ ΠΏΠ»ΠΎΡ…ΠΎ Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‡Π΅Π½ΡŒ мСлСньким ΠΈ Π΅Π³ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ тяТСло Ρ€Π°Π·Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ. ВСроятно Π±ΡƒΠ΄Π΅Ρ‚ Π»ΡƒΡ‡ΡˆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΌΠ΅Π½ΡŒΡˆΡƒΡŽ ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚Π½ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² мобильной вСрсии Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊ отобраТаСтся Π² ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΈΠΈ (Π² ΠΏΡ€ΠΈΠ±Π»ΠΈΠΆΠ΅Π½ΠΈΠΈ). Π­Π»Π΅ΠΌΠ΅Π½Ρ‚ <picture> позволяСт Π½Π°ΠΌ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊΠΎΠ΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅.

Π’ΠΎΠ·Π²Ρ€Π°Ρ‰Π°ΡΡΡŒ ΠΊ Π½Π°ΡˆΠ΅ΠΌΡƒ ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠΌΡƒ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ not-responsive.html, ΠΌΡ‹ ΠΈΠΌΠ΅Π΅ΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΡ‡Π΅Π½ΡŒ нуТдаСтся Π² худоТСствСнном ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠΈ:

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">

Π”Π°Π²Π°ΠΉΡ‚Π΅ исправим это ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ элСмСнта <picture>! Π’Π°ΠΊ ΠΆΠ΅ ΠΊΠ°ΠΊ <video> ΠΈ <audio>, элСмСнт <picture> это ΠΎΠ±Π΅Ρ€Ρ‚ΠΊΠ° содСрТащая Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ количСство элСмСнтов <source> ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ Π²Ρ‹Π±ΠΎΡ€ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ€Π°Π·Π½Ρ‹Ρ… источников, Π² сопровоТдаСнии ΠΊΡ€Π°ΠΉΠ½Π΅ Π²Π°ΠΆΠ½ΠΎΠ³ΠΎ элСмСнта <img>. Код responsive.html выглядит Ρ‚Π°ΠΊ:

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
  • Π­Π»Π΅ΠΌΠ΅Π½Ρ‚Β <source>Β ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Π΅Ρ‚Β Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Β media, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ содСрТит ΠΌΠ΅Π΄ΠΈΠ°-условиС;Β ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ этих условий опрСдяСтся, ΠΊΠ°ΠΊΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π²Π΅Π΄Π΅Π½ΠΎ. Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС, Ссли ΡˆΠΈΡ€ΠΈΠ½Π°Β viewport’a составит 799px ΠΈΠ»ΠΈ мСньшС, Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π²Π΅Π΄Π΅Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠ΅Ρ€Π²ΠΎΠ³ΠΎ элСмСнта <source>. Если ΡˆΠΈΡ€ΠΈΠ½Π° составит 800px ΠΈ Π±ΠΎΠ»Π΅Π΅Β β€”Β Π²Ρ‚ΠΎΡ€ΠΎΠ³ΠΎ.
  • Атрибут srcset содСрТит ΠΏΡƒΡ‚ΡŒ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Π²Π΅Π΄Π΅Π½ΠΎ. ΠžΠ±Ρ€Π°Ρ‚ΠΈΡ‚Π΅ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ, ΠΊΠ°ΠΊ ΠΈ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ с <img> Π²Ρ‹ΡˆΠ΅, <source> ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΈΠ½ΠΈΠΌΠ°Ρ‚ΡŒΒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹Β srcsetΒ ΠΈΒ sizes с нСсколько ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΌΠΈ изобраТниями. Π’Π°ΠΊ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎΒ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ Π³Ρ€ΡƒΠΏΠΏΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉΒ Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта <picture>, Π½ΠΎ ΠΈ Π·Π°Π΄Π°Ρ‚ΡŒ Π³Ρ€ΡƒΠΏΠΏΡƒ прСдписаний для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· Π½ΠΈΡ…. Π’ Ρ€Π΅Π°Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ Π²Ρ‹ вряд Π»ΠΈ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒΡΡ этим ΠΎΡ‡Π΅Π½ΡŒΒ Ρ‡Π°ΡΡ‚ΠΎ.
  • Вы всСгда долТны ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ элСмСнт <img>, с srcΒ ΠΈΒ alt, прямо ΠΏΠ΅Ρ€Π΅Π΄Β </picture>, ΠΈΠ½Π°Ρ‡Π΅ изобраТСния Π½Π΅ появятся. Π­Ρ‚ΠΎ Π½ΡƒΠΆΠ½ΠΎ Π½Π° Ρ‚ΠΎΡ‚ случай, ΠΊΠΎΠ³Π΄Π° Π½ΠΈ ΠΎΠ΄Π½ΠΎ ΠΈΠ· ΠΌΠ΅Π΄ΠΈΠ°-условий нС удовлСтворСно (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ссли Π±Ρ‹ Π²Ρ‹ ΡƒΠ±Ρ€Π°Π»ΠΈΒ Π²Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт <source>)Β ΠΈΠ»ΠΈ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ элСмСнт <picture>.

Π­Ρ‚ΠΎΡ‚ ΠΊΠΎΠ΄ позволяСт Π½Π°ΠΌ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΈ Π½Π° ΡˆΠΈΡ€ΠΎΠΊΠΈΡ…, ΠΈ Π½Π° ΡƒΠ·ΠΊΠΈΡ… экранах, ΠΊΠ°ΠΊ ΠΏΠΎΠΊΠ°Π·Π°Π½ΠΎ Π½ΠΈΠΆΠ΅:

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π’Π°ΠΌ слСдуСт ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ mediaΒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΡ€ΠΈ худоТСствСнном ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠΈ; ΠΊΠΎΠ³Π΄Π° Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚Π΅Β media, Π½Π΅ примСняйтС ΠΌΠ΅Π΄ΠΈΠ°-условия с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌΒ sizes.

ΠŸΠΎΡ‡Π΅ΠΌΡƒ это нСльзя ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ посрСдством CSS ΠΈΒ JavaScript?

Когда Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ страницу, ΠΎΠ½ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π΄ΠΎ Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ главный парсСр Π½Π°Ρ‡Π°Π» Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ ΠΈ ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ CSS ΠΈ JavaScript. Π’ срСднСм, эта Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ° ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ врСмя Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ страницы Π½Π° 20%. Но ΠΎΠ½Π° Π½Π΅ Ρ‚Π°ΠΊ ΠΏΠΎΠ»Π΅Π·Π½Π° Π² случаС с Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ изобраТСниями, поэтому ΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ Ρ‚Π°ΠΊΠΈΠ΅Β Ρ€Π΅Ρˆeния, ΠΊΠ°ΠΊΒ srcset. НапримСр, Π²Ρ‹ Π½Π΅ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒ элСмСнт <img>, ΠΏΠΎΡ‚ΠΎΠΌ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚ΡŒ ΡˆΠΈΡ€ΠΈΠ½Ρƒ viewport’Π° ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈΒ JavaScript ΠΈ динамичСски ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ источник изобраТСния. Π˜Π·Π½Π°Ρ‡Π°Π»ΡŒΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±Ρ‹Π»ΠΎ Π±Ρ‹Β ΡƒΠΆΠ΅ Π·Π°Π³Ρ€ΡƒΠΆΠ΅Π½ΠΎ ΠΊΒ Ρ‚ΠΎΠΌΡƒ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, ΠΊΠ°ΠΊ Π²Ρ‹ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΠ»ΠΈΒ Π΅Π³ΠΎ ΠΌΠ΅Π½ΡŒΡˆΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ, Ρ‡Ρ‚ΠΎ ΠΏΠ»ΠΎΡ…ΠΎ.

Π‘ΠΌΠ΅Π»ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ соврСмСнныС Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

Π•ΡΡ‚ΡŒ нСсколько Π½ΠΎΠ²Ρ‹Ρ… Ρ„ΠΎΡ€ΠΌΠ°Ρ‚ΠΎΠ² изобраТСния (Ρ‚Π°ΠΊΠΈΡ…, ΠΊΠ°ΠΊΒ WebP ΠΈΒ JPEG-2000), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ ΡƒΠ΄Π°Π΅Ρ‚ΡΡΒ ΡΠΎΡ…Ρ€Π°Π½ΡΡ‚ΡŒΒ Π²Ρ‹ΡΠΎΠΊΠΎΠ΅ качСство ΠΏΡ€ΠΈ ΠΌΠ°Π»ΠΎΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ Ρ„Π°ΠΉΠ»Π°. Π’Π΅ΠΌ Π½Π΅ ΠΌΠ΅Π½Π΅Π΅, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ ΠΈΡ… Π½Π΅ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ.

<picture> позволяСт Π½Π°ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² старых Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΠΏΠΈΡΠ°Ρ‚ΡŒ MIME-Ρ‚ΠΈΠΏ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Β type, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ сразу ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΡ‚Β Ρ„Π°ΠΉΠ»Ρ‹ Ρ‚Π°ΠΊΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ° ΠΊΠ°ΠΊ Π½Π΅ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΡ‹Π΅:

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
  • НС ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Β media, Ссли Π²Π°ΠΌ Π½Π΅ нуТно худоТСствСнноС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅.
  • Π’ элСмСнтС <source>Β ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΡƒΡ‚ΡŒ ΠΊ изобраТСниям Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ‚ΠΎΠ³ΠΎ Ρ‚ΠΈΠΏΠ°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΡƒΠΊΠ°Π·Π°Π½ Π²Β type.
  • Как ΠΈ Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…, ΠΏΡ€ΠΈ нСобходимости Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΒ srcset and sizes.

Π‘Π°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ создайтС ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²ΠΎΠ΅, худоТСствСнно ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½ΠΎΠ΅ изобраТСниС для ΡˆΠΈΡ€ΠΎΠΊΠΈΡ… ΠΈ ΡƒΠ·ΠΊΠΈΡ… экранов, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡΒ <picture> ΠΈΒ srcset.

  1. ΠΠ°ΠΏΠΈΡˆΠΈΡ‚Π΅ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽΒ HTML-Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΡƒ.
  2. НайдитС ΡˆΠΈΡ€ΠΎΠΊΠΎΡ„ΠΎΡ€ΠΌΠ°Ρ‚Π½ΠΎΠ΅ ΠΏΠ΅ΠΉΠ·Π°ΠΆΠ½ΠΎΠ΅ Ρ„ΠΎΡ‚ΠΎ с ΠΊΠ°ΠΊΠΎΠΉ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ яркой Π΄Π΅Ρ‚Π°Π»ΡŒΡŽ. Π‘ΠΎΠ·Π΄Π°ΠΉΡ‚Π΅ Π²Π΅Π±-Π²Π΅Ρ€ΡΠΈΡŽ изобраТСния посрСдством графичСского Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π°, ΠΏΠΎΡ‚ΠΎΠΌ ΠΎΠ±Ρ€Π΅ΠΆΡŒΡ‚Π΅ Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΊΡ€ΡƒΠΏΠ½Π΅Π΅ Π²Ρ‹Π΄Π΅Π»ΠΈΡ‚ΡŒ Π΄Π΅Ρ‚Π°Π»ΡŒ, ΠΈ создайтС Π²Ρ‚ΠΎΡ€ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅Β (ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ 480px достаточно).
  3. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ элСмСнт <picture> для Ρ€Π°Π±ΠΎΡ‚Ρ‹ с худоТСствСнно ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½ΠΎΠΉΒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ.
  4. ΠžΠ±ΠΎΠ·Π½Π°Ρ‡ΡŒΡ‚Π΅ Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΎΒ Ρ€Π°Π·Π½Ρ‹Ρ…Β Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ²Β Π΄Π»Ρ этой ΠΊΠ°Ρ€Ρ‚ΠΈΠΊΠ½ΠΈ.
  5. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅Β srcset/size для описания ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΏΡ€ΠΈ смСнС Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² viewport’Π°

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ инструмСнты Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΡΠ»Π΅Π΄ΠΈΡ‚ΡŒ смСну Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΊΠ°ΠΊ Π±Ρ‹Π»ΠΎ описано Π²Ρ‹ΡˆΠ΅.

Π­Ρ‚ΠΎ всС для ΠΎΡ‚Π·Ρ‹Π²Ρ‡ΠΈΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ — ΠΌΡ‹ надССмся, Π²Π°ΠΌ ΠΏΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΠΎΡΡŒ ΠΈΠ³Ρ€Π°Ρ‚ΡŒ с этими Π½ΠΎΠ²Ρ‹ΠΌΠΈ тСхнологиями. Напомним, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ здСсь обсуТдали Π΄Π²Π΅ Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹:

  • Π₯удоТСствСнноС ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠ΅: ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ±Ρ€Π΅Π·Π°Π½Π½Ρ‹Π΅ изобраТСния для Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΌΠ°ΠΊΠ΅Ρ‚ΠΎΠ² — Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π»Π°Π½Π΄ΡˆΠ°Ρ„Ρ‚Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для ΠΏΠΎΠ»Π½Ρ‹Ρ… экранов Π½Π° ΠΌΠ°ΠΊΠ΅Ρ‚Π΅ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π° ΠΈ ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‰Π΅Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½Π½Ρ‹ΠΉ основной ΠΎΠ±ΡŠΠ΅ΠΊΡ‚, для мобильного ΠΌΠ°ΠΊΠ΅Ρ‚Π°. Всё это ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ Ρ€Π΅ΡˆΠ΅Π½ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ <picture> элСмСнта.
  • ΠŸΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ: ΠŸΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΏΡ€ΠΈ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Ρ„Π°ΠΉΠ»Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π° Π½Π° устройствах с ΡƒΠ·ΠΊΠΈΠΌ экраном, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΈΠΌ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹ ΠΎΠ³Ρ€ΠΎΠΌΠ½Ρ‹Π΅ изобраТСния, ΠΊΠ°ΠΊ Π½Π° Π½Π°ΡΡ‚ΠΎΠ»ΡŒΠ½Ρ‹Ρ… дисплСях, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния Ρ€Π°Π·Π½ΠΎΠ³ΠΎ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ для экранов с высокой/Π½ΠΈΠ·ΠΊΠΎΠΉ ΠΏΠ»ΠΎΡ‚Π½ΠΎΡΡ‚ΡŒΡŽ. Π­Ρ‚Ρƒ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π²Π΅ΠΊΡ‚ΠΎΡ€Π½ΠΎΠΉ Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ (SVG ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ), ΠΈ srcset ΠΈ sizes Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹.

Π­Ρ‚ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅ подводит нас ΠΊ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΡŽ Ρ†Π΅Π»ΠΎΠ³ΠΎ модуля «ΠœΡƒΠ»ΡŒΡ‚имСдия ΠΈ встраиваниС»! ЕдинствСнноС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ ΠΎΡΡ‚Π°Π»ΠΎΡΡŒ сСйчас ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ Π΄Π²ΠΈΠ³Π°Ρ‚ΡŒΡΡ дальшС — это ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°ΡˆΠ΅Β ΠΌΡƒΠ»ΡŒΡ‚ΠΈΠΌΠ΅Π΄ΠΈΠΉΠ½ΠΎΠ΅ Π·Π°Π΄Π°Π½ΠΈΠ΅ ΠΈ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ, ΠΊΠ°ΠΊ Π²Ρ‹ усвоили ΠΌΠ°Ρ‚Π΅Ρ€ΠΈΠ°Π». Π’Π΅ΡΠ΅Π»ΠΈΡ‚Π΅ΡΡŒ!

Как ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

Β» Как ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS

ΠŸΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ Π²Π°ΡˆΠ΅ΠΌΡƒ вниманию Π½Π΅Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ, Π½ΠΎ ΠΏΠΎΠ»Π΅Π·Π½ΡƒΡŽ ΡΡ‚Π°Ρ‚ΡŒΡŽ для Ρ‚Π΅Ρ…, ΠΊΡ‚ΠΎ Π΄Π΅Π»Π°Π΅Ρ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹ΠΉ сайт. Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ я ΠΏΠΎΠΊΠ°ΠΆΡƒ, ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ автоматичСски ΠΏΠΎΠ΄Π³ΠΎΠ½ΡΡ‚ΡŒΡΡ ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана.

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ простоС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π² CSS.

β—‹ Если Π²Ρ‹ для создания сайтов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ Bootstrap, Ρ‚ΠΎΠ³Π΄Π° Π²Π°ΠΌ достаточно ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ ΠΏΡ€ΠΈΡΠ²ΠΎΠΈΡ‚ΡŒ класс Β«img-responsiveΒ».

НапримСр:

<img src="images/bloggood_ru.png">

β—‹ Если Π²Ρ‹ для создания сайтов ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ HTML+CSS, Ρ‚ΠΎΠ³Π΄Π° достаточно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ простоС ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ Π² CSS:


max-width: 100%;
height: auto;

НапримСр:


<html>
<head>
<title> Как ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS (bloggood.ru)</title>
<style>
.img-responsive
{
  max-width: 100%;
  height: auto;
}
</style>
</head>
<body>
<img src="images/bloggood_ru.png">
</body>
</html>

Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π±ΡƒΠ΄ΡƒΡ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ Π² зависимости ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° экрана.

Π‘Ρ‚Π°Π½Π΄Π°Ρ€Ρ‚Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана

Β 

Π—Π΄Π΅ΡΡŒ я сдвинул ΠΎΠΊΠ½ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°

ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ‚ΠΎ ΠΆΠ΅ самоС ΠΈΠ»ΠΈ ΠΎΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π²ΠΎΡ‚ эту ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρ‡Π΅Ρ€Π΅Π· Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½.

β—‹ Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ для создания сайта Π΄Π²ΠΈΠΆΠΎΠΊ WordPress, Ρ‚ΠΎΠ³Π΄Π° сдСлайтС Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ дСйствия:

1. ΠžΡ‚ΠΊΡ€ΠΎΠΉΡ‚Π΅ Π² Π°Π΄ΠΌΠΈΠ½ΠΊΠ΅ Ρ„Π°ΠΉΠ» Β«style.cssΒ» вашСй Ρ‚Π΅ΠΌΡ‹ ΠΈ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ Π² самый ΠΊΠΎΠ½Π΅Ρ† Π²ΠΎΡ‚ это CSS ΠΏΡ€Π°Π²ΠΈΠ»ΠΎ:


.img-responsive
{
  max-width: 100%;
  height: auto;
}

2. Π’ страницС ΠΈΠ»ΠΈ записи Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ, ΠΏΠΎΡ‚ΠΎΠΌ Π² ΠΏΠΎΡΠ²ΠΈΠ²ΡˆΠΈΡ…ΡΡ настройках Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π½Π° ΠΊΠ°Ρ€Π°Π½Π΄Π°Ρˆ (ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ):

3. ΠžΡ‚ΠΊΡ€ΠΎΡŽΡ‚ΡΡ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ изобраТСния. НайдитС Ρ‚Π°ΠΌ ΠΏΠΎΠ»Π΅ Β«CSS-класс изобраТСния» ΠΈ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅ Ρ‚ΡƒΠ΄Π° Β«img-responsiveΒ». НаТмитС Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚ΡŒΒ»:

4. ΠžΠ±Π½ΠΎΠ²ΠΈΡ‚Π΅ ΠΈΠ»ΠΈ сохранитС запись ΠΈΠ»ΠΈ страницу ΠΈ смотритС Π½Π° Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚.

На этом я Π·Π°ΠΊΠ°Π½Ρ‡ΠΈΠ²Π°ΡŽ Ρ€Π°ΡΡΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ ΠΏΠΎΠ΄ΠΎΠ³Π½Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ экрана.

Π’Π°ΠΌ всСго Ρ…ΠΎΡ€ΠΎΡˆΠ΅Π³ΠΎ!

ΠŸΠΎΠ½Ρ€Π°Π²ΠΈΠ»ΡΡ пост? Помоги Π΄Ρ€ΡƒΠ³ΠΈΠΌ ΡƒΠ·Π½Π°Ρ‚ΡŒ ΠΎΠ± этой ΡΡ‚Π°Ρ‚ΡŒΠ΅, ΠΊΠ»ΠΈΠΊΠ½ΠΈ Π½Π° ΠΊΠ½ΠΎΠΏΠΊΡƒ ΡΠΎΡ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Ρ… сСтСй ↓↓↓


ПослСдниС новости ΠΊΠ°Ρ‚Π΅Π³ΠΎΡ€ΠΈΠΈ:

ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ

ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Ρ‹Π΅ ΡΡ‚Π°Ρ‚ΡŒΠΈ:

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

ΠœΠ΅Ρ‚ΠΊΠΈ: Bootstrap, css, html, wordpress

АдаптивноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π° CSS

Π‘ Ρ€Π°Π·Π²ΠΈΡ‚ΠΈΠ΅ΠΌ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΎΠ½Π½Ρ‹Ρ… Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ всС большС адаптивности трСбуСтся ΠΎΡ‚ создаваСмых сайтов. ΠΠ΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ, собствСнно Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ Π² возмоТности сайта ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Ρ‹ ΠΈ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Ρ‹. ΠŸΡ€ΠΈ этом Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠ·Π΄Π°ΡŽΡ‚ΡΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ – ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Π΅ вСрсии сайтов. Но всС Π±ΠΎΠ»Π΅Π΅ популярным ΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒΡΡ создания Ρ‚Π°ΠΊΠΈΡ… сайтов, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ сами ΠΏΠ΅Ρ€Π΅ΡΡ‚Ρ€Π°ΠΈΠ²Π°ΡŽΡ‚ΡΡ ΠΏΠΎΠ΄ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ.

Часто Ρƒ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠΎΠ² Π²ΠΎΠ·Π½ΠΈΠΊΠ°Π΅Ρ‚ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π°Ρ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°. Π‘Π°ΠΉΡ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΠΉ ΠΈ подстраиваСтся ΠΏΠΎΠ΄ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ экрана Π² ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°Ρ…, Π½ΠΎ Π²ΠΎΡ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ° – изобраТСния Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ Π½Π΅ ΠΆΠ΅Π»Π°ΡŽΡ‚ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡΡ, Π° Π²Ρ‹Π»Π΅Π·Π°ΡŽΡ‚ Π·Π° ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра. Π­Ρ‚ΠΎ являСтся, Π²ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π½Π΅ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ для ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π° Π²ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ… ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Π½Π° ΠΏΠΎΠ³Ρ€Π΅ΡˆΠ½ΠΎΡΡ‚ΠΈ Π² Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅, Π½Ρƒ ΠΈ, СстСствСнно, Π½Π° сам статус сайта ΠΈ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΠ°. Π’Π΅Π΄ΡŒ всС прСдставлСниС складываСтся ΠΈΠ· ΠΌΠ΅Π»ΠΎΡ‡Π΅ΠΉ.

Π˜Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ эту ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ срСдствами каскадных Ρ‚Π°Π±Π»ΠΈΡ† стилСй – CSS.

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ 1. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… изобраТСниях.

Π’ CSS Ρ„Π°ΠΉΠ»Π΅ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ класс img-adaptive со ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΌΠΈ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌΠΈ:

.css-adaptive {
display: block;
max-width: 100%;
height: auto;
}

Π”Π°Π»Π΅Π΅, ΠΏΡ€ΠΈ вставкС изобраТСния Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ это класс:

<img src=”images/1.jpg” class=”css-adaptive”>

ΠŸΡ€ΠΈ этом ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄ ΡˆΠΈΡ€ΠΈΠ½Ρƒ Π±Π»ΠΎΠΊΠ° Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΎΠ½ΠΎ помСщаСтся. Но этот способ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π° Ρ‚Π΅ изобраТСния, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ подставляСтся класс css-adaptive.

Π’Π°Ρ€ΠΈΠ°Π½Ρ‚ 2. Π Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π½Π° всС изобраТСния Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π±Π»ΠΎΠΊΠ΅.

Допустим Π½Π° вашСм Π½ΠΎΠ²ΠΎΠΌ сайтС ΠΏΡƒΠ±Π»ΠΈΠΊΡƒΡŽΡ‚ΡΡ новости. Π’ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Π½ΠΎΠ²ΠΎΡΡ‚ΡŒ добавляСтся ΠΏΠΎ нСсколько ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. ΠŸΡ€ΠΈ этом всС Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠ΄ΡΡ‚Ρ€Π°ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄ Ρ€Π°Π·ΠΌΠ΅Ρ€ экрана. А ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ класс img-adaptiveдля ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ, Π²ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π΄ΠΎΠ»Π³ΠΎ, Π° Π²ΠΎ-Π²Ρ‚ΠΎΡ€Ρ‹Ρ…, Ссли новости Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹Π΅ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ, Ρ‚ΠΎ ΠΎΠ½ΠΈ просто Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π½Π°Ρ‚ΡŒ ΠΏΡ€ΠΎ этот класс.

Π˜Ρ‚Π°ΠΊ, Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ всС новости Π² ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ div Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ с классом news.

<div class=”news”>
<h2>ΠΠ΄Π°ΠΏΡ‚ΠΈΠ²Π½ΠΎΡΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² CSS</h2>
<img src=”imahes/1.jpg”>
<img src=”imahes/2.jpg”>
<img src=”imahes/3.jpg”>
</div>

А Π² Ρ„Π°ΠΉΠ» с CSS ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:

.news img {
display: block;
max-width: 100%;
height: auto;
}

Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ всС изобраТСния Π² новости станут Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹ΠΌΠΈ нСзависимо ΠΎΡ‚ ΠΈΡ… количСства ΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

ΠŸΠΎΠ΄Π΅Π»ΠΈΡ‚ΡŒΡΡ Π² соц. сСтях:

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол бСсплатно Π½Π° вСсь экран (46 Ρ„ΠΎΡ‚ΠΎ)

БСгодня практичСски Π² ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ соврСмСнного Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠ° Π΅ΡΡ‚ΡŒ ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΠΈΠ»ΠΈ Π½ΠΎΡƒΡ‚Π±ΡƒΠΊ, Ρ‡Ρ‚ΠΎ позволяСт ΡƒΡ‡ΠΈΡ‚ΡŒΡΡ, Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈ просто вСсСло ΠΏΡ€ΠΎΠ²ΠΎΠ΄ΠΈΡ‚ΡŒ врСмя. ΠŸΡ€ΠΈ этом хочСтся ΡƒΠΊΡ€Π°ΡΠΈΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ Ρ€Π°Π΄ΠΎΠ²Π°Π» Π³Π»Π°Π· ΠΈ ΠΏΠΎΠ΄Π½ΠΈΠΌΠ°Π» настроСниС. ИмСнно для этого ΡΡƒΡ‰Π΅ΡΡ‚Π²ΡƒΡŽΡ‚ ΠΎΠ±ΠΎΠΈ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол Ρ€Π°Π·Π½ΠΎΠΉ Ρ‚Π΅ΠΌΠ°Ρ‚ΠΈΠΊΠΈ. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ дальшС смотрим красивыС ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол бСсплатно Π½Π° вСсь экран.

ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ Π·Π°ΠΊΠ°Ρ‚, ΠΌΠΎΡ€Π΅. остров Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

Кошка ΠΈ собака Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

ΠŸΠΎΠ΄Π²ΠΎΠ΄Π½Ρ‹ΠΉ ΠΌΠΈΡ€, экзотичСскиС Ρ€Ρ‹Π±ΠΊΠΈ.

ΠšΡ€Π°ΡΠΈΠ²Π°Ρ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° с ΠΊΠΎΡ€Π°Π»Π»Π°ΠΌΠΈ, морскими Ρ€Ρ‹Π±ΠΊΠ°ΠΌΠΈ.

Π›ΠΎΡˆΠ°Π΄ΠΈ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ ΠΏΠ΅ΠΉΠ·Π°ΠΆ. ЛСс, Π³ΠΎΡ€Ρ‹, Π·Π°ΠΊΠ°Ρ‚.

Π‘ΠΎΠ±Π°ΠΊΠ° Π»Π΅ΠΆΠΈΡ‚ Π½Π° Ρ‚Ρ€Π°Π²Π΅.

Π“Ρ€ΠΈΠ±Ρ‹ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ Π²ΠΎΠ΄ΠΎΠΏΠ°Π΄.

Π“Ρ€Π΅ΠΉΠΏΡ„Ρ€ΡƒΡ‚ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

ΠšΡ€Π°ΡΠΈΠ²Π°Ρ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π° заставку.

ЛСсноС ΠΎΠ·Π΅Ρ€ΠΎ.

ΠžΡ€Ρ…ΠΈΠ΄Π΅ΠΈ Π½Π° Ρ‡Π΅Ρ€Π½Ρ‹Ρ… камнях.

Π”Π΅Π»ΡŒΡ„ΠΈΠ½ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

Π‘Π΅Π»ΠΊΠ° Π½Π° вСсь экран.

Π‘Π°Π±ΠΎΡ‡ΠΊΠΈ Π½Π° Ρ†Π²Π΅Ρ‚ΠΊΠ°Ρ….

Обои Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

ΠŸΡ€ΠΈΡ€ΠΎΠ΄Π° Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

ΠšΡ€Π°ΡΠΈΠ²Π°Ρ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° с ΠΏΡ‚ΠΈΡ‡ΠΊΠΎΠΉ Π½Π° заставку.

Π‘ΠΎΠΆΡŒΡ ΠΊΠΎΡ€ΠΎΠ²ΠΊΠ° Π½Π° вСсь экран.

Π›Π΅ΠΎΠΏΠ°Ρ€Π΄ Π½Π° Π΄Π΅Ρ€Π΅Π²Π΅.

Кошка Π½Π° Ρ‚Ρ€Π°Π²Π΅.

ΠšΡ€Π°ΡΠΈΠ²Π°Ρ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π° вСсь экран.

ΠžΡΡ‚Ρ€ΠΎ Π² ΠΎΠΊΠ΅Π°Π½Π΅.

ΠšΡ€Π°ΡΠΈΠ²Ρ‹Π΅ ΠΊΠ°ΠΌΠ½ΠΈ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

Π ΠΎΠ·Π° Π½Π° Π»ΡŒΠ΄Ρƒ.

ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ ΠΏΠ΅ΠΉΠ·Π°ΠΆ. ΠœΠΎΡ€Π΅, солнцС, Π³ΠΎΡ€Ρ‹.

Π’ΠΈΠ³Ρ€ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

ΠŸΡ€ΠΈΡ€ΠΎΠ΄Π° Π½Π° заставку.

ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ Π²ΠΎΠ΄ΠΎΠΏΠ°Π΄.

Π Π°Π·Π½ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹Π΅ Ρ€Π°ΠΊΡƒΡˆΠΊΠΈ Π½Π° вСсь экран.

Π’ΠΈΠ³Ρ€ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

ΠœΠΎΡ€ΡΠΊΠΈΠ΅ ΠΆΠΈΡ‚Π΅Π»ΠΈ. Π Ρ‹Π±ΠΊΠΈ ΠΈ Ρ‡Π΅Ρ€Π΅ΠΏΠ°Ρ…Π°.

ΠšΠΎΡ‚ΡΡ‚Π° Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

Лисята Π½Π° заставку.

ΠšΡ€ΠΎΠ»ΠΈΠΊ Π½Π° вСсь экран.

Π›Π΅Π² ΠΈ Π»ΡŒΠ²ΡΡ‚Π° Π½Π° ΠΊΠ°ΠΌΠ½Π΅.

ΠšΠΎΡ‚ Π½Π° вСсь экран.

Π”Π΅Π»ΡŒΡ„ΠΈΠ½ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

Панда Π½Π° Π΄Π΅Ρ€Π΅Π²Π΅.

ΠšΡ€Π°ΡΠΈΠ²Π°Ρ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° с лошадьми.

Π›Π΅ΠΎΠΏΠ°Ρ€Π΄ Π½Π° вСсь экран.

НовогодниС хомяки.

Π–ΠΈΡ€Π°Ρ„Ρ‹ Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол.

Π©Π΅Π½ΠΊΠΈ Π½Π° вСсь экран.

ΠšΡ€Π°ΡΠΈΠ²Π°Ρ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π½Π° Ρ€Π°Π±ΠΎΡ‡ΠΈΠΉ стол бСсплатно.

МнС нравится114НС нравится3

Π‘ΡƒΠ΄ΡŒ Ρ‡Π΅Π»ΠΎΠ²Π΅ΠΊΠΎΠΌ, проголосуй Π·Π° пост!

Π—Π°Π³Ρ€ΡƒΠ·ΠΊΠ°…

Img β€” Html Ρ‚Π΅Π³ для вставки ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ (Src), выравнивания ΠΈ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ Π΅Π΅ тСкстом (align), Π° Ρ‚Π°ΠΊ ΠΆΠ΅ задания Ρ„ΠΎΠ½Π° (background)

Главная / Как устроСны сайты / Html Π·Π° 10 ΡƒΡ€ΠΎΠΊΠΎΠ²

10 января 2021

  1. Π’Π΅Π³Π° Img ΠΈ Π΅Π³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Src, Width ΠΈ Height
  2. Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с ссылкой, Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Alt ΠΈ Title
  3. ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ тСкстом Π² HtmlΒ β€” Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Align
  4. BackgroundΒ β€” ΠΊΠ°ΠΊ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ для сайта Π² чистом Html

ЗдравствуйтС, ΡƒΠ²Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»ΠΈ Π±Π»ΠΎΠ³Π° KtoNaNovenkogo.ru. ΠŸΡ€ΠΎ Ρ‚ΠΎ, ΠΊΠ°ΠΊΠΈΠ΅ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Ρ‹ растровой Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ (Gif, Png, Jpg) ΠΈ Π² ΠΊΠ°ΠΊΠΈΡ… случаях Π»ΡƒΡ‡ΡˆΠ΅ всСго Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для вставки ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π½Π° страницы своСго сайта, ΠΌΡ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ успСли ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΡ‚ΡŒ с ΡΡ‚Π°Ρ‚ΡŒΠ΅, ссылка Π½Π° ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π° Ρ‡ΡƒΡ‚ΡŒ Π²Ρ‹ΡˆΠ΅.

БСгодня ΠΆΠ΅ ΠΌΡ‹ ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ рассмотрим всС аспСкты использования Ρ‚Π΅Π³Π° Img для вставки ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, посмотрим ΠΊΠ°ΠΊ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ тСкстом Π² Html ΠΊΠΎΠ΄Π΅, ΡƒΠ·Π½Π°Π΅ΠΌ ΠΊΠ°ΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния Π² качСствС Ρ„ΠΎΠ½Π° для сайта, ΠΊΠ°ΠΊ ΠΈΠ·ΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΈΡ… Ρ€Π°Π·ΠΌΠ΅Ρ€ ΠΈ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ (ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ, Π²Π»Π΅Π²ΠΎ ΠΈ Π²ΠΏΡ€Π°Π²ΠΎ).

ИспользованиС Ρ‚Π΅Π³Π° Img ΠΈ Π΅Π³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Src, Width ΠΈ Height

Π˜Ρ‚Π°ΠΊ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π³Ρ€Π°Ρ„ΠΈΠΊΡƒ Π½Π° своСм сайтС. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ вставки изобраТСния ΠΊΠ°ΠΊ элСмСнта (ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π°) Π² Html ΠΊΠΎΠ΄ страницы. Как Ρ€Π°Π· ΠΈΠΌΠ΅Π½Π½ΠΎ такая вставка осущСствляСтся с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Img, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ являСтся особСнным — строчным элСмСнтом с Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ, ΠΊ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ относятся всСго лишь Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅ элСмСнта языка гипСртСкстовой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ, ΠΎΠ΄Π½ΠΈ ΠΈΠ· ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… ΠΌΡ‹ ΡƒΠΆΠ΅ упомянули, Π° Ρ‚Ρ€ΠΈ ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Ρ…Β β€” Iframe (соврСмСнный Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ использования Ρ„Ρ€Π΅ΠΉΠΌΠΎΠ²), Object ΠΈ Embed (для вставки Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ ΠΌΠ΅Π΄ΠΈΠ° ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°).

Π’Π΅Π΄Π΅Ρ‚ сСбя ΠΎΠ½ Π² точности ΠΊΠ°ΠΊ строчный элСмСнт, Π½ΠΎ Π²ΠΎΡ‚ Π²Π½ΡƒΡ‚Ρ€ΠΈ Π½Π΅Π³ΠΎ отобраТаСтся посторонний внСшний ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ (Ρ„ΠΎΡ‚ΠΎ Π² случаС Img ΠΈΠ»ΠΈ Π²ΠΈΠ΄Π΅ΠΎ ΠΈ Ρ„Π»Π΅Ρˆ Π² случаС Object ΠΈ Embed). Π›ΡŽΠ±ΠΎΠΉ ΠΈΠ· этих Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… элСмСнтов ΠΏΠΎΠ΄Ρ€Π°Π·ΡƒΠΌΠ΅Π²Π°Π΅Ρ‚ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅ внСшнСго Ρ„Π°ΠΉΠ»Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ Π²ΠΎΡ‚ Π² эту ΡΠ°ΠΌΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Π·Π°Π΄Π°Π½Π½ΡƒΡŽ Π² Π½Π΅ΠΌ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ.

Для указания ΠΏΡƒΡ‚ΠΈ Π΄ΠΎ графичСского Ρ„Π°ΠΉΠ»Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ Π½Π° страницу, слуТит ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Src.

<img src="ΠΏΡƒΡ‚ΡŒ_Π΄ΠΎ_Ρ„Π°ΠΉΠ»Π°_изобраТСния">

Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ ΠΏΡ€ΠΈ Ρ€Π°Π·Π±ΠΎΡ€Π΅ Html ΠΊΠΎΠ΄Π° страницы, ΠΊΠ°ΠΊ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ встрСтит Π² Π½Π΅ΠΌ тэг Img, сразу ΠΆΠ΅ создаСт ΠΎΠ±Π»Π°ΡΡ‚ΡŒ для строчного элСмСнта, Π² ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ загруТаСтся внСшний Ρ„Π°ΠΉΠ» (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, фотография). ΠŸΡƒΡ‚ΡŒ Π΄ΠΎ Ρ„Π°ΠΉΠ»Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ Π±Π΅Ρ€Π΅Ρ‚ ΠΈΠ· содСрТимого Src.

Когда ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ с вашСго сСрвСра Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ, Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ опрСдСляСт истинныС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ этой ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΈ Ρ€Π°Π·Π΄Π²ΠΈΠ³Π°Π΅Ρ‚ Π½Π° эти самыС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ‚Ρƒ ΡΡ‚Ρ€ΠΎΡ‡Π½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ создал ΠΏΡ€ΠΈ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠ΅Π½ΠΈΠΈ Π² ΠΊΠΎΠ΄Π΅ элСмСнта Имг.

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ сразу ΠΆΠ΅ выдСлял для этого элСмСнта ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½ΡƒΠΆΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π° Π½Π΅ ΠΏΠΎΡ‚ΠΎΠΌ Π΅Π΅ измСнял ΠΏΡ€ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½ΠΈΠΈ Π΄Π°Π½Π½Ρ‹Ρ… ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°Π΅ΠΌΠΎΠ³ΠΎ изобраТСния, Ρ‚ΠΎ Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ Width ΠΈ Height.

<img src="ΠΏΡƒΡ‚ΡŒ Π΄ΠΎ Ρ„Π°ΠΉΠ»Π° изобраТСния">

Если Π²Ρ‹ Π·Π°Π΄Π°Π»ΠΈ ΠΈΡ…, Ρ‚ΠΎ Ρ‚ΠΎΠ³Π΄Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ создаСт ΠΎΠ±Π»Π°ΡΡ‚ΡŒ с Π½ΡƒΠΆΠ½Ρ‹ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΈ Ρ‚ΡƒΠ΄Π° ΡƒΠΆΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ Π²ΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ вашС Ρ„ΠΎΡ‚ΠΎ, Π΄Π°ΠΆΠ΅ Ссли ΠΎΠ½ΠΎ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. ΠšΡΡ‚Π°Ρ‚ΠΈ, ΠΈΠ½ΠΎΠ³Π΄Π° приходится Π²ΡΡ‚Ρ€Π΅Ρ‡Π°Ρ‚ΡŒ Π½Π° сайтах Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‰ΠΈΡ… вСбмастСров Ρ‚Π°ΠΊΡƒΡŽ ΠΎΡˆΠΈΠ±ΠΊΡƒ.

На сСрвСр заливаСтся графичСский Ρ„Π°ΠΉΠ» ΠΎΠ³Ρ€ΠΎΠΌΠ½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈ вСсом Π² нСсколько ΠΌΠ΅Π³Π°Π±Π°ΠΉΡ‚ (сразу послС фотографирования Π±Π΅Π· ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ) ΠΈ прописываСтся Π΄ΠΎ Π½Π΅Π³ΠΎ ΠΏΡƒΡ‚ΡŒ Π² Src. А для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π½Π΅ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΎ Π±Ρ‹ вСсь экран, Π² тэг Img Π΄ΠΎΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ Width ΠΈ Height с ΠΏΡ€ΠΈΠ΅ΠΌΠ»Π΅ΠΌΡ‹ΠΌΠΈ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°ΠΌΠΈ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΈ высотС.

И Ρ‡Ρ‚ΠΎ получаСтся Π² Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅? ΠŸΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ Ρ‚Π°ΠΊΠΎΠ³ΠΎ сайта Π½Π°Π±Π»ΡŽΠ΄Π°Π΅Ρ‚ ΡƒΠ΄Ρ€ΡƒΡ‡Π°ΡŽΡ‰Π΅ ΠΌΠ΅Π΄Π»Π΅Π½Π½ΡƒΡŽ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠ·ΠΊΡƒ изобраТСния Π² ΡΡ€Π°Π²Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΌΠ°Π»ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, Π·Π°Π΄Π°Π½Π½ΡƒΡŽ Π² упомянутых Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°Ρ… (нСсколько ΠΌΠ΅Π³Π°Π±Π°ΠΉΡ‚ вСса Π²ΠΏΠΈΡΡ‹Π²Π°ΡŽΡ‚ΡΡ Π² Ρ€Π°Π·ΠΌΠ΅Ρ€ 300 Π½Π° 400 пиксСлов).

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ сразу ΠΆΠ΅ Π΄Π΅Π»Π°ΠΉΡ‚Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ для выкладывания Π² Π’Π΅Π± Ρ‚ΠΎΠ³ΠΎ самого Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π²Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π½Π° сайтС ΠΈ ΠΏΡ€ΠΎΠΏΠΈΡΡ‹Π²Π°Ρ‚ΡŒ Π² Width ΠΈ Height Ρ‚Π΅Π³Π° Img. Π£Π²Π°ΠΆΠ°ΠΉΡ‚Π΅ своих ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ ΠΈ Π½Π΅ Ρ‚Ρ€Π°Ρ‚ΡŒΡ‚Π΅ понапрасну ΠΈΡ… Ρ‚Ρ€Π°Ρ„ΠΈΠΊ (особСнно ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ). Π‘ΠΆΠ°Ρ‚ΡŒ Ρ„ΠΎΡ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² FastStone Image Viewer ΠΈΠ»ΠΈ любом Π΄Ρ€ΡƒΠ³ΠΎΠΌ графичСском Ρ€Π΅ΠΊΡ‚ΠΎΡ€Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΎΠ½Π»Π°ΠΉΠ½ Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅ ΠŸΠΈΠΊΡΠ»Ρ€.

ΠšΡΡ‚Π°Ρ‚ΠΈ, ΠΊΡ€ΠΎΠΌΠ΅ Π·Π°Π±Π»Π°Π³ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½ΠΎΠ³ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ для вставки Π½Π° страницы сайта, слСдуСт со всСй Ρ‚Ρ‰Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ΄ΠΎΠΉΡ‚ΠΈ Π΅Ρ‰Π΅ ΠΈ ΠΊ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ вСса. ΠŸΠΎΡ€ΠΎΠΉ ΠΌΠΎΠΆΠ½ΠΎ Π±Π΅Π· ΠΏΠΎΡ‚Π΅Ρ€ΠΈ качСства Π΄ΠΎΠ±ΠΈΡ‚ΡŒΡΡ ΠΊΡ€Π°Ρ‚Π½ΠΎΠ³ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ вСса графичСских Ρ„Π°ΠΉΠ»ΠΎΠ², Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Ρ‚ ΠΊ Π³ΠΎΡ€Π°Π·Π΄ΠΎ Π±ΠΎΠ»Π΅Π΅ быстрой ΠΈΡ… Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ ΠΈ сниТСнию Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ Π½Π° сСрвСр хостинга. ΠœΠΎΠΆΠ΅Ρ‚Π΅ для этой Ρ†Π΅Π»ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΌ ΠΈ эффСктивным ΠΎΠ½Π»Π°ΠΉΠ½ сСрвисом ΠΏΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ посмотрим, ΠΊΠ°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ ΠΏΡƒΡ‚ΡŒ Π΄ΠΎ Ρ„Π°ΠΉΠ»Π° с ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ΠΌ Π² Src Ρ‚Π΅Π³Π° Img. БобствСнно, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅, ΠΈ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹Π΅ ссылки, ΠΎ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… я ΡƒΠΆΠ΅ довольно ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ писал Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅. ВсС зависит ΠΎΡ‚ нюансов ΠΈ удобства.

Π’.Π΅. Src ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΎΠ΄Π΅Ρ€ΠΆΠ°Ρ‚ΡŒ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ записи:

<img src="Π½Π°Π·Π²Π°Π½ΠΈΠ΅_Ρ„Π°ΠΉΠ»Π°">
<img src="ΠΏΠ°ΠΏΠΊΠ°/Π½Π°Π·Π²Π°Π½ΠΈΠ΅_Ρ„Π°ΠΉΠ»Π°">
<img src="https://ktonanovenkogo.ru/ΠΏΠ°ΠΏΠΊΠ°/Π½Π°Π·Π²Π°Π½ΠΈΠ΅_Ρ„Π°ΠΉΠ»Π°">

Π’ ΠΏΠ΅Ρ€Π²ΠΎΠΌ случаС, графичСский Ρ„Π°ΠΉΠ» Π΄ΠΎΠ»ΠΆΠ΅Π½ Π»Π΅ΠΆΠ°Ρ‚ΡŒ Π² Ρ‚ΠΎΠΉ ΠΆΠ΅ ΠΏΠ°ΠΏΠΊΠ΅, Ρ‡Ρ‚ΠΎ ΠΈ Ρ„Π°ΠΉΠ» вашСй Π²Π΅Π± страницы (Π² случаС использования Π²Π°ΠΌΠΈ CMS, ΠΏΠ΅Ρ€Π²Ρ‹Π΅ Π΄Π²Π° Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° Π²Π°ΠΌ вряд Π»ΠΈ ΠΏΠΎΠ΄ΠΎΠΉΠ΄ΡƒΡ‚, хотя для задания Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния Π² CSS это ΠΎΡ‡Π΅Π½ΡŒ ΡƒΠ΄ΠΎΠ±Π½ΠΎ). Π’ΠΎ-Π²Ρ‚ΠΎΡ€ΠΎΠΌ случаС, Π³Ρ€Π°Ρ„ΠΈΠΊΠ° Π»Π΅ΠΆΠΈΡ‚ Π²ΠΎ Π²Π»ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ ΠΏΠ°ΠΏΠΊΠ΅ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ„Π°ΠΉΠ»Π° вашСй страницы, Π½Ρƒ, Π° Π² Ρ‚Ρ€Π΅Ρ‚ΡŒΠ΅ΠΌ случаС, Π² Src ΡƒΠΊΠ°Π·Π°Π½ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½Ρ‹ΠΉ ΠΏΡƒΡ‚ΡŒ Π΄ΠΎ Ρ„Π°ΠΉΠ»Π° с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ.

И Ρ‚ΡƒΡ‚ слСдуСт ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒ Π²Π½ΠΈΠΌΠ°Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ вставляСтС Π² Html ΠΊΠΎΠ΄, ΠΌΠΎΠΆΠ΅Ρ‚ Π»Π΅ΠΆΠ°Ρ‚ΡŒ Π°Π±ΡΠΎΠ»ΡŽΡ‚Π½ΠΎ Π½Π° любом сСрвСрС. Π’.Π΅. Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅, допустим, ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΡƒΡ‚ΡŒ Π΄ΠΎ Π½Π΅Π΅ Π½Π° ΠΌΠΎΠ΅ΠΌ Π±Π»ΠΎΠ³Π΅ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ этот ΠΏΡƒΡ‚ΡŒ Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Src тэга Img Π½Π° своСм сайтС. ВсС Π±ΡƒΠ΄Π΅Ρ‚ прСкрасно Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, ΠΏΡ€Π°Π²Π΄Π°, Ссли я Π½Π΅ Π·Π°ΠΏΡ€Π΅Ρ‰Ρƒ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹Π΅ дСйствия Π² .htaccess Π½Π° своСм сСрвСрС, Π½ΠΎ это ΡƒΠΆΠ΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ пСсня (ΠΏΠΎΠ³ΡƒΠ³Π»ΠΈΡ‚Π΅ Π½Π° Ρ‚Π΅ΠΌΡƒ Β«Π—Π°Ρ‰ΠΈΡ‚Π° ΠΎΡ‚ Ρ…ΠΎΡ‚Π»ΠΈΠ½ΠΊΠΎΠ²Β»).

Π’ΠΎΠΎΠ±Ρ‰Π΅, ΠΏΠΎ ΠΏΡ€Π°Π²ΠΈΠ»Π°ΠΌ языка Html, Π½Π° вашСм сСрвСрС обязан Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ сам Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ (web страница), Π° всС ΠΎΡΡ‚Π°Π»ΡŒΠ½Ρ‹Π΅ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΠΈ Ρ„Π°ΠΉΠ»Ρ‹ (Π³Ρ€Π°Ρ„ΠΈΠΊΠ°, Π²ΠΈΠ΄Π΅ΠΎ, скрипты, стили), ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ вмСстС с Π½ΠΈΠΌ, ΠΌΠΎΠ³ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π½Π° Ρ€Π°Π·Π½Ρ‹Ρ… сСрвСрах.

Π’ этом, кстати говоря, Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· способов ΠΏΠΎΠ²Ρ‹ΡˆΠ΅Π½ΠΈΡ скорости Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ. Π”Π° ΠΈ Ρ‚Π΅ ΠΆΠ΅ самыС счСтчики посСщСний, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ навСрняка Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π° своСм рСсурсС для наблюдСния Π·Π° статистикой посСщаСмости, Ρ‚ΠΎΠΆΠ΅ Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ свои ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ΅Ρ€Ρ‹ ΠΈ скрипты с ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Ρ… ΠΎΡ‚ вашСго хостов.

Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ с ссылкой, Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Alt ΠΈ Title Π² Img?

Если Img ΠΏΠΎ своСй сути являСтся строчным элСмСнтом, Ρ‚ΠΎ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ просто ΡΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ большой Π±ΡƒΠΊΠ²ΠΎΠΉ, Π° Π·Π½Π°Ρ‡ΠΈΡ‚ Π½Π°ΠΌ Π½ΠΈΡ‡Ρ‚ΠΎ Π½Π΅ ΠΌΠ΅ΡˆΠ°Π΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ссылкой, Π·Π°ΠΊΠ»ΡŽΡ‡ΠΈΠ² этот Ρ‚Π΅Π³ Π²Π½ΡƒΡ‚Ρ€ΡŒ гипСрссылки. Π’ΠΎΠΎΠ±Ρ‰Π΅, ΠΏΡ€ΠΎ это я ΡƒΠΆΠ΅ достаточно ΠΏΠΎΠ΄Ρ€ΠΎΠ±Π½ΠΎ писал Π² Π½Π΅Π΄Π°Π²Π½Π΅ΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΡ€ΠΎ созданиС гипСрссылки Π² Html ΠΊΠΎΠ΄Π΅, Π½ΠΎ Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΠΈΡ‚ΡŒΡΡ Π±ΡƒΠ΄Π΅Ρ‚ Π½Π΅ Π³Ρ€Π΅Ρ….

<a href="https://ktonanovenkogo.ru"><img src="https://ktonanovenkogo.ru/image/webcamxp.png"></a>

Π’ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ IE Π²ΠΎΠΊΡ€ΡƒΠ³ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π²Ρ‹ сдСлали ссылкой, появится Ρ€Π°ΠΌΠΎΡ‡ΠΊΠ° ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ Π² Ρ‚Ρ€ΠΈ пиксСла. Π§Ρ‚ΠΎΠ±Ρ‹ Π΅Π΅ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ, Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Π±ΡƒΠ΄Π΅Ρ‚ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² тэг Img Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Border со Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ ноль:

<a href="https://ktonanovenkogo.ru"><img border=0 src="https://ktonanovenkogo.ru/image/webcamxp.png"></a>

Для всСх Ρ‚Π΅Ρ… случаСв, ΠΊΠΎΠ³Π΄Π° графичСский Ρ„Π°ΠΉΠ» ΠΏΠΎ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΠΎΠ΄Π³Ρ€ΡƒΠ·ΠΈΡ‚ΡŒΡΡ вмСстС с Html Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚ΠΎΠΌ (ΠΏΡƒΡ‚ΡŒ Π΄ΠΎ Π½Π΅Π³ΠΎ прописан Π½Π΅ Π²Π΅Ρ€Π½ΠΎ ΠΈΠ»ΠΈ ΠΆΠ΅ Π΅Ρ‰Π΅ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ), прСдусмотрСн ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Alt.

Alt выполняСт Ρ€ΠΎΠ»ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ прСдставлСния изобраТСния. Π§Ρ‚ΠΎ происходит Π² Ρ‚ΠΎΠΌ случаС, ΠΊΠΎΠ³Π΄Π° Π³Ρ€Π°Ρ„ΠΈΠΊΠ° Π½Π΅ грузится? Π‘Ρ€Π°ΡƒΠ·Π΅Ρ€ всС Ρ€Π°Π²Π½ΠΎ, ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ² Π² ΠΊΠΎΠ΄Π΅ элСмСнт Img, Ρ„ΠΎΡ€ΠΌΠΈΡ€ΡƒΠ΅Ρ‚ ΠΏΠΎΠ΄ Π½Π΅Π³ΠΎ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, которая Π² зависимости ΠΎΡ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠΎΠ³ΠΎ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΠΌΠΎΠΆΠ΅Ρ‚ Π»ΠΈΠ±ΠΎ ΠΎΡΡ‚Π°Π²Π°Ρ‚ΡŒΡΡ Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π»ΠΈΠ±ΠΎ ΡΡ…Π»ΠΎΠΏΡ‹Π²Π°Ρ‚ΡŒΡΡ.

Но Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒ ΠΈΠΌΠ΅Π» прСдставлСниС, Ρ‡Ρ‚ΠΎ Π½Π° этом мСстС страницы Π΄ΠΎΠ»ΠΆΠ½Π° Π±Ρ‹Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°, Π²Ρ‹ ΠΈ прописываСтС Alt Π² Img, Π³Π΄Π΅ ΠΈ Π²Π²ΠΎΠ΄ΠΈΡ‚Π΅ тСкст с описаниСм Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎ здСсь Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΎ. Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠΈΠΌΠΎΠ΅ Alt Π±ΡƒΠ΄ΡƒΡ‚ Π²Ρ‹Π²ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ Π² области Π½Π΅ΠΏΠΎΠ΄Π³Ρ€ΡƒΠ·ΠΈΠ²ΡˆΠ΅ΠΉΡΡ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ.

<img src="ΠΏΡƒΡ‚ΡŒ Π΄ΠΎ Ρ„Π°ΠΉΠ»Π° изобраТСния" >

Ну, ΠΈ ΠΊΡ€ΠΎΠΌΠ΅ этого, для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ Π² Html ΠΊΠΎΠ΄Π΅, Π° Ρ‚Π°ΠΊ ΠΆΠ΅ ΠΈ для Π΄Ρ€ΡƒΠ³ΠΈΡ… элСмСнтов языка гипСртСкстовой Ρ€Π°Π·ΠΌΠ΅Ρ‚ΠΊΠΈ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, всС для Ρ‚Π΅Ρ… ΠΆΠ΅ гипСрссылок) имССтся Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΠΏΡ€ΠΈ Π½Π°Π²Π΅Π΄Π΅Π½ΠΈΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ Π½Π° Π½ΠΈΡ… курсором ΠΌΡ‹ΡˆΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ Π΅ΠΌΡƒ ΠΊΠ°ΠΊΠΎΠΉ-Π»ΠΈΠ±ΠΎ ΡΠΎΠΏΡ€ΠΎΠ²ΠΎΠΆΠ΄Π°ΡŽΡ‰ΠΈΠΉ тСкст.

ДСлаСтся это с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Title, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π² нашСм случаС вставляСтся Π² Img. Он ΠΏΠΎ сути являСтся Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкой ΠΈ Π΅Π³ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ практичСски для всСх Π²ΠΈΠ΄ΠΈΠΌΡ‹Ρ… Π½Π° страницС элСмСнтах Html ΠΊΠΎΠ΄Π°, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ Ρ‡Ρ‚ΠΎ-Ρ‚ΠΎ Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ ΠΏΠΎΡΡΠ½ΠΈΡ‚ΡŒ.

РаньшС, кстати, ΠΊ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΉ подсказкС ΠΏΡ€ΠΈΠ²ΠΎΠ΄ΠΈΠ»ΠΎ ΠΈ Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ тСкста Alt, Π½ΠΎ сСйчас ΠΎΡ‚ Ρ‚Π°ΠΊΠΎΠ³ΠΎ повСдСния ΠΎΡ‚ΠΊΠ°Π·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΈ этот Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π² основном выполняСт Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ρ€ΠΎΠ»ΡŒ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½ΠΎΠ³ΠΎ тСкста, Π° Title ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΈΡΠΊΠ»ΡŽΡ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ для Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰ΠΈΡ… подсказок.

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.pngя" alt="" title="">

На самом Π΄Π΅Π»Π΅ содСрТимоС Alt ΠΈ Title Ρ‚Π΅Π³Π° Img Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ слуТит для удобства посСтитСлСй вашСго сайта, Π½ΠΎ ΠΈ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΎΡ‡Π΅Π½ΡŒ ΡΡƒΡ‰Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π½Π° ΡƒΡΠΏΠ΅ΡˆΠ½ΠΎΡΡ‚ΡŒ продвиТСния вашСго ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°.

Для этого Π½ΡƒΠΆΠ½ΠΎ Π½Π΅ Π·Π°Π±Ρ‹Π²Π°Ρ‚ΡŒ ΡƒΠΏΠΎΡ‚Ρ€Π΅Π±Π»ΡΡ‚ΡŒ Π² Π½ΠΈΡ… ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова, ΠΊΠ°ΠΊ я ΠΎΠ± этом Π½Π΅ΠΎΠ΄Π½ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎ писал, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΡ€ΠΎ ΠΏΡ€ΠΎΠ΄Π²ΠΈΠΆΠ΅Π½ΠΈΠ΅ сайта своими силами ΠΈΠ»ΠΈ ΠΆΠ΅ Π² ΠΏΡƒΠ±Π»ΠΈΠΊΠ°Ρ†ΠΈΠΈ ΠΏΡ€ΠΎ Ρ‚ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°ΡΠΊΡ€ΡƒΡ‚ΠΈΡ‚ΡŒ сайт самому.

ΠšΠ»ΡŽΡ‡Π΅Π²Ρ‹Π΅ слова Π² Alt ΠΈ Title (особСнно Π² Alt) ΠΌΠΎΠ³ΡƒΡ‚ Π·Π°ΠΌΠ΅Ρ‚Π½ΠΎ ΡƒΠ»ΡƒΡ‡ΡˆΠΈΡ‚ΡŒ Ρ€Π°Π½ΠΆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ вашСго сайта, Π° Ρ‚Π°ΠΊ Π² сСрвисах поиска ΠΏΠΎ изобраТСниям (ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌ) ЯндСкса ΠΈΠ»ΠΈ Google. Однако с этим Π½ΡƒΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ остороТным, ΠΈΠ±ΠΎ довольно Π»Π΅Π³ΠΊΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΠ°ΡΡ‚ΡŒ ΠΏΠΎΠ΄ Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ Π·Π° спам ΠΎΡ‚ ЯндСкса ΠΈΠ»ΠΈ Π“ΡƒΠ³Π»Π°.

ΠžΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ тСкстом Π² HtmlΒ β€” Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Align Ρ‚Π΅Π³Π° Img

Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΏΡ€ΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ вставлСнных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π² Html ΠΊΠΎΠ΄Π΅. Π£ всСх Ρ‡Π΅Ρ‚Ρ‹Ρ€Π΅Ρ… строчных элСмСнтов с Π·Π°ΠΌΠ΅Ρ‰Π°Π΅ΠΌΡ‹ΠΌ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚ΠΎΠΌ (Img, Iframe, Object ΠΈ Embed) Π΅ΡΡ‚ΡŒ Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ выравнивания с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Align. Но ΠΎΠ½ Π²ΠΎΠΎΠ±Ρ‰Π΅-Ρ‚ΠΎ примСняСтся Ρ‚ΠΎΠ»ΡŒΠΊΠΎ для Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтов, Π° упомянутыС Ρ‚Π΅Π³ΠΈΒ β€” строчныС.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ значСния Align для Img (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π·Π°Π΄Π°Π½ΠΈΠ΅ обтСкания ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ тСкстом) Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ·Π½Π°Ρ‡Π°Ρ‚ΡŒ совсСм ΠΈΠ½ΠΎΠ΅, Π½Π΅ΠΆΠ΅Π»ΠΈ ΠΏΡ€ΠΈ использовании этого ΠΆΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Π² Π±Π»ΠΎΡ‡Π½Ρ‹Ρ… элСмСнтах (ΠΏΠ°Ρ€Π°Π³Ρ€Π°Ρ„Π°Ρ… P, Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°Ρ… h2-H6 ΠΈ Ρ‚.ΠΏ.).

Π’ΠΎΠΎΠ±Ρ‰Π΅, Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Align ΠΏΡ€ΠΈ использовании Π² Img ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° Π΄Π²Π΅ Π³Ρ€ΡƒΠΏΠΏΡ‹.

Π˜Ρ‚Π°ΠΊ, Ρ‡Ρ‚ΠΎ ΠΆΠ΅ происходит, ΠΊΠΎΠ³Π΄Π° ΠΌΡ‹ вставляСм графичСский Ρ„Π°ΠΉΠ» Π² тСкст Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°? ЀактичСски ΠΎΠ½ встаСт ΠΊΠ°ΠΊ ΠΎΠ΄Π½Π° большая Π±ΡƒΠΊΠ²Π°:

По ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΏΠΎ Π½ΠΈΠΆΠ½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ, Ρ‚.Π΅. Π΄ΠΎΠ±Π°Π²Π»Π΅Π½ΠΈΠ΅ Π² элСмСнт Img Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° align=»bottom» Π½ΠΈΡ‡Π΅Π³ΠΎ Π½Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚. Но Π·Π°Ρ‚ΠΎ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ Π·Π°Π΄Π°Ρ‚ΡŒ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ ΠΊΡ€Π°ΡŽ, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π² элСмСнт align=»top»:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="top">

Π’ этом случаС ΠΏΡ€ΠΎΠΈΠ·ΠΎΡˆΠ»ΠΎ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста Π² строкС, Π³Π΄Π΅ располоТСна фотография, ΠΏΠΎ Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ Π΅Π΅ ΠΊΡ€Π°ΡŽ.

Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ этого Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° align=»middle»:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="middle">

Π’ этом случаС тСкст Π² строкС с ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎ сСрСдинС этого самого рисунка.

Но ΠΊΡ€ΠΎΠΌΠ΅ выравнивания ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ Π² Html прСдусмотрСно ΠΈ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ тСкстом, для Ρ‡Π΅Π³ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ значСния — Left ΠΈ Right. Π­Ρ‚Π° Π³Ρ€ΡƒΠΏΠΏΠ° Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Align сильно отличаСтся ΠΎΡ‚ ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰Π΅ΠΉ.

ΠŸΡ€ΠΈ использовании Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ Left ΠΈ Right Π²Π½ΡƒΡ‚Ρ€ΠΈ элСмСнта Img ΠΌΡ‹ добиваСмся, Ρ‚Π°ΠΊ Π½Π°Π·Ρ‹Π²Π°Π΅ΠΌΠΎΠ³ΠΎ, обтСкания ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ тСкстом, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ задаСтся Π² Html ΠΊΠΎΠ΄Π΅. Π’ этом случаС рисунок становится ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠΌ элСмСнтом (Π°Π½Π°Π»ΠΎΠ³ Float Π² CSS) ΠΈ тСкст Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ Π΅Π΅ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ.

НапримСр, ΠΏΡ€ΠΈ align=»left» ΠΌΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Ρ‚Π°ΠΊΠΎΠΉ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left">

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Left Π² Img ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ Ρ„ΠΎΡ‚ΠΎ ΠΏΠ»Π°Π²Π°Π΅Ρ‚ Π² Π»Π΅Π²ΡƒΡŽ сторону, Π° тСкст Π΅Π΅ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ справа. Π’ случаС align=»right» ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠ»Π°Π²Π°Ρ‚ΡŒ Π² ΠΏΡ€Π°Π²ΡƒΡŽ сторону, Π° тСкст Π΅Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ слСва:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="right">

ΠŸΡ€ΠΈ Π·Π°Π΄Π°Π½ΠΈΠΈ обтСкания изобраТСния тСкстом Π΅ΡΡ‚ΡŒ ΠΎΠ΄ΠΈΠ½ Π½ΡŽΠ°Π½ΡΒ β€” тСкст слишком Π±Π»ΠΈΠ·ΠΊΠΎ располагаСтся ΠΎΡ‚ Π½Π΅Π³ΠΎ, Ρ‡Ρ‚ΠΎ создаСт нСприятный Π³Π»Π°Π·Ρƒ эффСкт прилипания. Π”Π°Π½Π½ΡƒΡŽ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡƒ совсСм Π»Π΅Π³ΠΊΠΎ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS свойств padding ΠΈΠ»ΠΈ margin, Π½ΠΎ ΠΈ Π² чистом Html сущСствуСт своС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅.

Для этого ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ элСмСнта ImgΒ β€” Hspace ΠΈ Vspace. Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π½ΠΈΡ… отТимаСтся ΠΎΠ±Ρ‚Π΅ΠΊΠ°ΡŽΡ‰ΠΈΠΉ тСкст ΠΎΡ‚ изобраТСния. Hspace Π·Π°Π΄Π°Π΅Ρ‚ отступы слСва ΠΈ справа ΠΎΡ‚ изобраТСния Π΄ΠΎ ΠΎΠ±Ρ‚Π΅ΠΊΠ°ΡŽΡ‰Π΅Π³ΠΎ Π΅Π³ΠΎ тСкста, Π° VspaceΒ β€” свСрху ΠΈ снизу. ΠžΡ‚ΡΡ‚ΡƒΠΏΡ‹ Π·Π°Π΄Π°ΡŽΡ‚ΡΡ Π² пиксСлах, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

<img src="https://ktonanovenkogo.ru/image/rss_no_drop1.png" align="left" hspace="30" vspace="30">

BackgroundΒ β€” ΠΊΠ°ΠΊ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ Ρ„ΠΎΠ½ для сайта Π² чистом Html

ГрафичСскиС Ρ„Π°ΠΉΠ»Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΊΠ°ΠΊ элСмСнты ΠΊΠΎΠ΄Π° страницы, Π½ΠΎ ΠΈ ΠΊΠ°ΠΊ Π·Π°Π»ΠΈΠ²ΠΊΡƒ Π² качСствС Π΅Π΅ Ρ„ΠΎΠ½Π°. Π’ΠΎΠΎΠ±Ρ‰Π΅, Ρ„ΠΎΠ½ для сайта Π² языкС Html ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Π»ΠΈΠ±ΠΎ Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Π»ΠΈΠ±ΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. Ну, Π° Π² соврСмСнной вСрсткС с использованиСм свойств CSS , Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ (background image) ΡΠ²Π»ΡΡŽΡ‚ΡΡ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· основных элСмСнтов, ΠΈΠ±ΠΎ Π½ΠΈΠΊΠ°ΠΊΠΈΡ… ΠΎΡ„ΠΎΡ€ΠΌΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΡ… элСмСнтов, вставлСнных с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Img Π½Π° страницах соврСмСнных сайтов, Π½Π΅Ρ‚.

ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹Π΅ изобраТСния ΠΈΠ³Ρ€Π°ΡŽΡ‚ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² соврСмСнной вСрсткС с использованиСм CSS (ΠΏΠΎΠ³ΠΎΠ²ΠΎΡ€ΠΈΠΌ ΠΎΠ± этом Π² ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½ΠΎΠΉ ΡΡ‚Π°Ρ‚ΡŒΠ΅). Пока ΠΆΠ΅ ΠΌΡ‹ рассмотрим, ΠΊΠ°ΠΊ это всС дСлаСтся Π² чистом Html с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° Background элСмСнта Body ΠΈ Ρ‚Π΅Π³ΠΎΠ² Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Table, ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡƒΡ‚ΡŒ Π΄ΠΎ графичСского Ρ„Π°ΠΉΠ»Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°Π»ΠΈΡ‚Π° web страница ΠΈΠ»ΠΈ ΠΆΠ΅ Ρ‚Π°Π±Π»ΠΈΡ†Π° (ΠΈΠ»ΠΈ Π΅Π΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Π°Ρ ячСйка).

НапримСр, Π΄ΠΎΠ±Π°Π²ΠΈΠ² Π² Body Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ Background ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ Π²ΠΈΠ΄Π°:

<body background="https://ktonanovenkogo.ru/image/bgkletka.gif">

ΠœΡ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ Ρ„ΠΎΠ½ для нашСго сайта, состоящий ΠΈΠ· Ρ€Π°Π·ΠΌΠ½ΠΎΠΆΠ΅Π½Π½ΠΎΠΉ Ρ„ΠΎΡ‚ΠΊΠΈ, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π±ΡƒΠ΄Π΅Ρ‚ Π·Π°ΠΏΠΎΠ»Π½Π΅Π½Π° вся видимая ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π½Π° ΠΌΠ°Π½Π΅Ρ€ ΠΏΠ»ΠΈΡ‚ΠΊΠΈ:

Π€ΠΎΠ½ΠΎΠ²ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, начиная с Π»Π΅Π²ΠΎΠ³ΠΎ Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΡƒΠ³Π»Π°, повторяСтся сразу ΠΏΠΎ Π΄Π²ΡƒΠΌ осям (абсцисс ΠΈ ΠΎΡ€Π΄ΠΈΠ½Π°Ρ‚). ΠŸΠΎΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ состыковываСтся с ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΠΌ ΠΈ Ρ‚.Π΄. ΠšΡΡ‚Π°Ρ‚ΠΈ, Ссли Π²Ρ‹ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π·Π°Π»ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ страницы ΠΈΠ»ΠΈ Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΎΠ΄Π½ΠΈΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Ρ‚ΠΎ для этого Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡƒΠΆΠ΅ Π½Π΅ Background, Π° Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ bgcolor, Π² качСствС значСния ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ Ρ†Π²Π΅Ρ‚Π°, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Ρ‚Π°ΠΊ:

<body bgcolor="#f0f8ff">

Π’ΠΎ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ†Π²Π΅Ρ‚ Ρ„ΠΎΠ½Π° Π·Π°Π΄Π°Π½Π½Ρ‹ΠΉ Ρ‡Π΅Ρ€Π΅Π· bgcolor:

Π’ΠΎΡ‡Π½ΠΎ Ρ‚Π°ΠΊ ΠΆΠ΅, ΠΊΠ°ΠΊ ΠΈ Π² случаС с Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠΌ background, bgcolor ΠΌΠΎΠΆΠ½ΠΎ Π΅Ρ‰Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ для задания Ρ„ΠΎΠ½Π° всСй Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ ΠΈΠ»ΠΈ ΠΆΠ΅ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Ρ… Π΅Π΅ элСмСнтов.

Π’Π½ΠΈΠΌΠ°Π½ΠΈΠ΅! Атрибуты bgcolor ΠΈ background сСйчас Π½Π΅ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽΡ‚ΡΡ ΠΊ использованию. Как ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ описанныС Π²Ρ‹ΡˆΠ΅ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹, Π·Π°Π΄Π°ΡŽΡ‰ΠΈΠ΅ ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π½ΠΈΠ΅ ΠΈ отступы. ВмСсто Π½ΠΈΡ… Π½ΡƒΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ CSS свойства.

Π£Π΄Π°Ρ‡ΠΈ Π²Π°ΠΌ! Π”ΠΎ скорых встрСч Π½Π° страницах Π±Π»ΠΎΠ³Π° KtoNaNovenkogo.ru

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽ для Π·Π°Ρ€Π°Π±ΠΎΡ‚ΠΊΠ°

РазбираСмся с border-image ΠΈΠ· CSS3 β€” CSS-LIVE

ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄ ΡΡ‚Π°Ρ‚ΡŒΠΈ CSS3 Border-Image Explained с сайта demosthenes.info, c Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ Π°Π²Ρ‚ΠΎΡ€Π° β€” Π”Π°Π΄Π»ΠΈ Π‘Ρ‚ΠΎΡ€ΠΈ.

Одно ΠΈΠ· самых ΠΌΠΎΡ‰Π½Ρ‹Ρ… Π½ΠΎΠ²Ρ‹Ρ… свойств CSS, border-image, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΊ Ρ‚ΠΎΠΌΡƒ ΠΆΠ΅ Π΅Ρ‰Ρ‘ ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ ΡˆΠΈΠΊΠ°Ρ€Π½ΡƒΡŽ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΡƒ, Π·Π° ΠΈΡΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅ΠΌ (Π° Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ всС вмСстС!) IE10 ΠΈ Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΡ… вСрсий. Но, ΠΊ соТалСнию, Ρ‚Π°ΠΊΠΆΠ΅ являСтся ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ· самых нСпонятных ΠΈ слоТных для понимания свойств.

ОбъяснСниС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ border-image, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π»ΡƒΡ‡ΡˆΠ΅ всСго ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ. Π’ΠΎ-ΠΏΠ΅Ρ€Π²Ρ‹Ρ…, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Ρ€Π°Π·Π±Π΅Ρ€Ρ‘ΠΌ Π»ΡŽΠ±ΡƒΡŽ Ρ€Π°ΠΌΠΊΡƒ Π½Π° ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅: прСдставим Π·ΠΎΠ»ΠΎΡ‡Ρ‘Π½ΡƒΡŽ Ρ€Π°ΠΌΡƒ для ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹, которая Ρ€Π°Π·Π΄Π΅Π»Π΅Π½Π° Π½Π° Π΄Π΅Π²ΡΡ‚ΡŒ Β«ΠΏΠ»ΠΈΡ‚ΠΎΠΊΒ» двумя Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌΠΈ ΠΈ двумя Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΌΠΈ линиями. На рисункС Π²Ρ‹ΡˆΠ΅ я ΠΏΠΎΠΌΠ΅Ρ‚ΠΈΠ» Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Π»ΠΈΠ½ΠΈΠΈ, ΠΊΠ°ΠΊ V1ΠΈΒ V2, Π° Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Π΅, ΠΊΠ°ΠΊ h2ΠΈΒ h3.

ВмСсто Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ·Π²ΠΎΠ»ΠΈΡ‚ΡŒ Π²Π°ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для ΠΊΠ°ΠΆΠ΄ΠΎΠΉ части Π³Ρ€Π°Π½ΠΈΡ†Ρ‹, border-image настаиваСт, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ создали ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΌ всС части находятся Π½Π° своих мСстах, Π° Π·Π°Ρ‚Π΅ΠΌ ΠΏΠΎΡ€Π΅Π·Π°Π»ΠΈ это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ CSS-Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΏΡ€ΠΈΠ²ΡΠ·Ρ‹Π²Π°ΡŽΡ‚ΡΡ ΠΊ ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ этих Π»ΠΈΠ½ΠΈΠΉ.

ΠŸΡ€Π΅Π΄ΡΡ‚Π°Π²ΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΌΡ‹ ΠΈΠ³Ρ€Π°Π΅ΠΌ Π² ΠœΠΎΡ€ΡΠΊΠΎΠΉ Π±ΠΎΠΉ ΠΈ ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡ΠΈΠΌ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ Β«ΠΏΠ»ΠΈΡ‚ΠΊΡƒΒ», ΡΠΎΠ·Π΄Π°Π½Π½ΡƒΡŽ нашими Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌΠΈ линиями. К Π²Π΅Ρ€Ρ…Π½Π΅ΠΌΡƒ Π»Π΅Π²ΠΎΠΌΡƒ ΡƒΠ³Π»Ρƒ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΎΠ±Ρ€Π°Ρ‚ΠΈΡ‚ΡŒΡΡ ΠΊΠ°ΠΊ A1, ΠΊ ΠΏΡ€Π°Π²ΠΎΠΉ срСднСй части B3, ΠΈ Ρ‚.Π΄. (БрСдняя Ρ‡Π°ΡΡ‚ΡŒ β€” B2 β€” Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΠΈΠ³Π½ΠΎΡ€ΠΈΡ€ΠΎΠ²Π°Π½Π° CSS, послС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ ΠΌΡ‹ ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΠΈΠΌ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ для нашСго изобраТСния Ρ€Π°ΠΌΠΊΠΈ.) ΠœΠ΅ΡΡ‚Π° размСщСния Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ² ΠΏΡ€Π΅Π΄ΠΎΠΏΡ€Π΅Π΄Π΅Π»ΡΡŽΡ‚ Ρ€ΠΎΠ»ΠΈ для Π½Π°ΡˆΠΈΡ… Β«ΠΏΠ»ΠΈΡ‚ΠΎΠΊΒ». A3 всСгда Π·Π°ΠΉΠΌΠ΅Ρ‚ мСсто изобраТСния Π²Π΅Ρ€Ρ…Π½Π΅Π³ΠΎ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ ΡƒΠ³Π»Π° для нашСй Ρ€Π°ΠΌΠΊΠΈ; C2Β Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ для Π½ΠΈΠΆΠ½Π΅Π³ΠΎ края, ΠΈ Ρ‚.Π΄.

Π”Π°Π²Π°ΠΉΡ‚Π΅ рассмотрим Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ стороны ΠΈ Π²Π΅Ρ€Ρ… нашСй Ρ€Π°ΠΌΠΊΠΈ, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ΠΈ находятся Π² довольно спСцифичных, ΠΏΡ€ΠΈΡ‚ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½Ρ‡ΠΈΠ²Ρ‹Ρ…, условиях. Когда ΠΌΡ‹ примСняСм Ρ€Π°ΠΌΠΊΡƒ ΠΊΒ  HTML-элСмСнту, ΠΌΡ‹ Π½Π΅ Π·Π½Π°Π΅ΠΌ, ΠΊΠ°ΠΊΠΎΠΉ Π²Π΅Π»ΠΈΡ‡ΠΈΠ½Ρ‹ Π±ΡƒΠ΄Π΅Ρ‚ бокс. ПослС Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ эти условия примСнятся ΠΊ Ρ€Π°ΠΌΠΊΠ΅, ΡƒΠ³Π»ΠΎΠ²Ρ‹Π΅ Β«ΠΏΠ»ΠΈΡ‚ΠΊΠΈΒ» Π½Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Ρ‚Ρ€ΠΎΠ½ΡƒΡ‚Ρ‹ измСнСниями Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Π½ΠΎ Π±ΠΎΠΊΠΎΠ²Ρ‹Π΅ стороны, Π° Ρ‚Π°ΠΊΠΆΠ΅ Π²Π΅Ρ€Ρ… ΠΈ Π½ΠΈΠ· ΠΎΠΏΡ€Π΅Π΄Π΅Π»Ρ‘Π½Π½ΠΎ измСнятся. Нам Π½Π°Π΄ΠΎ Ρ€Π΅ΡˆΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ вСсти сСбя Β«ΠΏΠ»ΠΈΡ‚ΠΊΠΈΒ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Ρ‚Π°ΠΌ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½Ρ‹: Π±ΡƒΠ΄ΡƒΡ‚ Π»ΠΈ ΠΎΠ½ΠΈ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒΡΡ ΠΈΠ»ΠΈ Π²Ρ‹Ρ‚ΡΠ³ΠΈΠ²Π°Ρ‚ΡŒΡΡ, Ссли бокс станСт большС? Π­Ρ‚ΠΎ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ относится ΠΊ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ нашСй Ρ€Π°ΠΌΠΊΠΈ ΠΈ поэтому ΠΈ Π½Π°ΠΌ придСтся ΠΎΠ±ΠΎΠ·Π½Π°Ρ‡ΠΈΡ‚ΡŒ наш Π²Ρ‹Π±ΠΎΡ€ ΠΏΡ€ΠΈ написании CSS.

НаконСц, Π΄Π°Π²Π°ΠΉΡ‚Π΅ ΠΏΠΎΠ΄ΡƒΠΌΠ°Π΅ΠΌ ΠΎ линиях, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌΠΈ созданы наши ΠΏΠ»ΠΈΡ‚ΠΊΠΈ: Π΄Π²ΡƒΡ… Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹Ρ… ΠΈ Π΄Π²ΡƒΡ… Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ…. Нам Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ CSS, Π³Π΄Π΅ Π±ΡƒΠ΄ΡƒΡ‚ Π½Π°Ρ…ΠΎΠ΄ΠΈΡ‚ΡŒΡΡ эти Π²ΠΎΠΎΠ±Ρ€Π°ΠΆΠ°Π΅ΠΌΡ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»ΠΈ, для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ½ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΠ» эту ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ для создания Β«ΠΏΠ»ΠΈΡ‚ΠΎΠΊΒ». ΠœΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΎΡ‚ΡΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ ΠΈΡ… ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π»ΠΈΠ±ΠΎ Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… Π»ΠΈΠ±ΠΎ Π² пиксСлях ΠΎΡ‚ ΡƒΠ³Π»ΠΎΠ². (Π― Π±Ρ‹ сказал, Ρ‡Ρ‚ΠΎ Π² Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²Π΅ случаСв Π²Ρ‚ΠΎΡ€ΠΎΠ΅ ΠΏΡ€ΠΎΡ‰Π΅ всСго, ΠΊΡ€ΠΎΠΌΠ΅ случая с SVG-ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°ΠΌΠΈ Π² качСствС изобраТСния Ρ€Π°ΠΌΠΊΠΈ).

Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΡˆΠ΅Π²Ρ€ΠΎΠ½Ρ‹ Π½Π° ΡƒΠ³Π»Π°Ρ… этой Ρ€Π°ΠΌΠΊΠΈ ΠΎΠ·Π½Π°Ρ‡Π°ΡŽΡ‚, Ρ‡Ρ‚ΠΎ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹ обязаны Π±Ρ‹Ρ‚ΡŒ достаточно большими, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Ρ‚Π΅ Π΄Π΅Ρ‚Π°Π»ΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ€Π°ΠΌΠΊΠΈ ΠΈ ΠΏΡ€ΠΎΠΈΠ·Π²Π΅Π΄ΡƒΡ‚ эффСкт Π²ΠΈΠ½ΡŒΠ΅Ρ‚ΠΊΠΈ, ΠΊΠ°ΠΊ Π² настоящСй Ρ€Π°ΠΌΠ΅, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½Π° самом Π΄Π΅Π»Π΅ рСалистичСн для ΠΏΡ€ΠΎΡ„Π΅ΡΡΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½Π½ΠΎΠΉ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ ΠΈΠ»ΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹. Π― сдСлал Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΡŽΡŽ Ρ‡Π°ΡΡ‚ΡŒ Ρ€Π°ΠΌΠΊΠΈ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½ΠΎΠΉ, Ρ‡Ρ‚ΠΎ ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ background-color, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ я ΡƒΠΊΠ°Π·Ρ‹Π²Π°ΡŽ, Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΎΡΠ²Π΅Ρ‡ΠΈΠ²Π°Ρ‚ΡŒ насквозь.

Бпособ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΌ измСряСтся ΠΈ вносится Π² объявлСниС позиция Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚Π΅Π»Π΅ΠΉ, Ρ‚ΠΎΠΆΠ΅ странСн: h3 отмСряСтся ΠΎΡ‚ Π½ΠΈΠ·Π° изобраТСния, h2 β€” ΠΎΡ‚ Π²Π΅Ρ€Ρ…Π°, V1β€” ΠΎΡ‚ Π»Π΅Π²ΠΎΠ³ΠΎ края, Π° V2Β β€” ΠΎΡ‚ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ. Они находятся Π² объявлСнии Π² Ρ‚Π°ΠΊΠΎΠΌ порядкС:

border-image:Β url(image)Β h2 V2 h3 V1

Как Π½ΠΈ странно, ΠΊΠΎΠ³Π΄Π° значСния вводятся Π² Π²ΠΈΠ΄Π΅ пиксСлов, Π·Π° Π½ΠΈΠΌΠΈ Π½Π΅ слСдуСт суффикс Β«pxΒ», Π² ΠΎΡ‚Π»ΠΈΡ‡ΠΈΠ΅ ΠΎΡ‚ ΠΏΠΎΡ‡Ρ‚ΠΈ всСго ΠΎΡΡ‚Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ Π² CSS.

Π”Π°Π½Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄ Π»ΠΈΡ†Π΅Π½Π·ΠΈΠ΅ΠΉ Creative Commons (снятоС Π­Π½Π½ΠΈ Π§Π°Ρ€Ρ‚Ρ€Π°Π½Π΄) вставлСно Π½Π° страницу ΠΏΡ€ΠΈ ΠΏΠΎΠΌΠΎΡ‰ΠΈ этого ΠΊΠΎΠ΄Π°

<imgΒ src="teracotta-statue.jpg"Β alt="Terracotta Statue"Β class="frame">

И учитывая Π²Π΅Ρ€Ρ…Π½Π΅Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°ΠΌΠΊΠΈ, CSS, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ Π½Π΅ΠΉ, Π±Ρ‹Π» Π±Ρ‹ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊΠΈΠΌ:

img.frameΒ {

border-image:Β url('frame.png')Β 93 92 87 92;

background-color:Β #ffe;

}

(Π—Π°ΠΌΠ΅Ρ‚ΡŒΡ‚Π΅, Ρ‡Ρ‚ΠΎ этот ΠΊΠΎΠ΄ ΠΏΠΎΠΊΠ° Π΅Ρ‰Ρ‘ Π½Π΅ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚: Π΅ΡΡ‚ΡŒ Π΅Ρ‰Ρ‘ нСсколько Π²Π΅Ρ‰Π΅ΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ).

Π•ΡΡ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ‚ΠΎΠ³ΠΎ, ΠΊΠ°ΠΊ Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Ρ‚ΡŒΡΡ стороны. stretchΒ ΠΈΠΌΠ΅Π½Π½ΠΎ Ρ‚Π°ΠΊ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚, repeat Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡ‚ΡŒ Β«ΠΏΠ»ΠΈΡ‚ΠΊΠΈΒ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒ ΠΈΡ… Π² Π΄ΠΎΡΡ‚ΡƒΠΏΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ, roundΒ β€” это Π³ΠΈΠ±Ρ€ΠΈΠ΄ ΠΎΠ±ΠΎΠΈΡ… Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ стараСтся ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для сторон ΠΏΠΎΠ»Π½Ρ‹Π΅ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ ΠΏΠ»ΠΈΡ‚ΠΎΠΊ, Π½ΠΎ растягивая ΠΈΡ… Ρ‚Π°ΠΌ, Π³Π΄Π΅ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ.

Π’Π°ΠΆΠ½ΠΎ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π»ΡŒΠ½ΠΎΠ΅ объявлСниС border-width, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠΎΠ±Ρ‰ΠΈΡ‚ΡŒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρƒ ΠΊΠ°ΠΊΠΎΠΉ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ каТдая сторона, Ρ‡Ρ‚ΠΎΠ±Ρ‹ изобраТСния ΠΌΠΎΠ³Π»ΠΈ Π² Π½ΠΈΡ… Π²ΠΌΠ΅ΡΡ‚ΠΈΡ‚ΡŒΡΡ. Π‘ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ источников скаТут Π²Π°ΠΌ, Ρ‡Ρ‚ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Π΅ Π² border-width, Π΄ΠΎΠ»ΠΆΠ½Ρ‹ Π² точности ΡΠΎΠ²ΠΏΠ°Π΄Π°Ρ‚ΡŒ с Ρ‚Π΅ΠΌΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ для ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΈ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚ΠΎΠ², Ρ‚.Π΅.:

border-width:Β 93px 92px 87px 92px;

Но я ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ», Ρ‡Ρ‚ΠΎ с СдинствСнным Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ΠΌ border-widthΒ Ρ€Π°ΠΌΠΊΠ° ΠΏΠΎ сути ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ:

border-width:Β 60px;

ΠŸΠΎΠΌΠ½ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ Π² Π²ΠΈΠ΄Π΅ запасного Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Π° Π²Π°ΠΌ Ρ‚Π°ΠΊΠΆΠ΅ Π½ΡƒΠΆΠ½Π° обычная Ρ€Π°ΠΌΠΊΠ° Π½Π° случай, Ссли ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для Β«ΠΏΠ»ΠΈΡ‚ΠΎΠΊΒ» Π½Π΅ загруТаСтся ΠΈΠ»ΠΈ ΠΏΠΎΡΠ΅Ρ‚ΠΈΡ‚Π΅Π»ΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ IE: я Π±Ρ‹ ΠΏΡ€Π΅Π΄Π»ΠΎΠΆΠΈΠ» Π²Π·ΡΡ‚ΡŒ Ρ€Π°ΠΌΠΊΡƒ Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½ΠΎΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ ΠΊΠ°ΠΊ ΠΏΠ»ΠΈΡ‚ΠΊΠΈ ΠΈ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π΅Π΅ ΠΏΡ€Π΅ΠΎΠ±Π»Π°Π΄Π°ΡŽΡ‰ΠΈΠΌ Ρ†Π²Π΅Ρ‚ΠΎΠΌ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, с ΠΊΠ°ΠΊΠΈΠΌ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΌΠ°Π»ΠΎΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹ΠΌ border-styleΒ Π²ΠΏΡ€ΠΈΠ΄Π°Ρ‡Ρƒ.

Π˜Ρ‚Π°ΠΊ, ΠΏΠΎΠ»Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ для эффСкта, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΏΠΎΠΊΠ°Π·Π°Π½ Π² Π²Π΅Ρ€Ρ…Ρƒ этой страницы, выглядит Ρ‚Π°ΠΊ:

img.frameΒ {
border-image:Β url('frame.png')Β 93 92 87 92 stretch stretch;Β border-color:#f4be52;Β border-style:Β inset;Β border-width:Β 60px;Β width:Β 500px;Β height:Β 333px;background-color:Β #ffe;Β }

Π‘ΠΎΠ²Π΅Ρ‚Ρ‹ ΠΏΠΎ Π΄ΠΈΠ·Π°ΠΉΠ½Ρƒ

Из-Π·Π° Π½Π΅ΠΈΠ·Π±Π΅ΠΆΠ½ΠΎΠ³ΠΎ растяТСния ΠΈ Π΄Π΅Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΡ€Π΅Ρ‚Π΅Ρ€ΠΏΠ΅Ρ‚ΡŒ любоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, примСняСмоС Π² border-image, я Π±Ρ‹ Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ PNG-изобраТСния для Ρ€Π°ΠΌΠΎΠΊ, Π³Π΄Π΅ это Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ. PNG-24 Ρ‚Π°ΠΊΠΆΠ΅ позволяСт Π΄Π΅Π»Π°Ρ‚ΡŒ части ΠΏΠ»ΠΈΡ‚ΠΎΠΊ ΠΏΡ€ΠΎΠ·Ρ€Π°Ρ‡Π½Ρ‹ΠΌΠΈ, Ρ‡Ρ‚ΠΎ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½ΠΎ, Ссли Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ большиС ΡƒΠΊΡ€Π°ΡˆΠ΅Π½ΠΈΡ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΡƒΠ³Π»Π°, ΠΊΠ°ΠΊ Π² нашСм ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ с Π·ΠΎΠ»ΠΎΡ‡Ρ‘Π½Π½ΠΎΠΉ Ρ€Π°ΠΌΠΎΠΉ. Π‘Π΅Π· прозрачности Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½ΠΈΡ… частСй изобраТСния наша Ρ€Π°ΠΌΠ° рискуСт Π½Π°Π»ΠΎΠΆΠΈΡ‚ΡŒΡΡ Π½Π° Ρ‡Ρ‚ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ ΠΈΠ· Π²Π½ΡƒΡ‚Ρ€Π΅Π½Π½Π΅Π³ΠΎ содСрТимого бокса.

Π’ΠΎΡΡ…ΠΈΡ‚ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, Ρ‡Ρ‚ΠΎ box-shadow ΠΏΡ€ΠΎΠ΄ΠΎΠ»ΠΆΠΈΡ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ Ρ‚Π°ΠΊ, ΠΊΠ°ΠΊ оТидалось. ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Ρ‚Π΅Π½ΡŒ ΠΎΡ‚Ρ€Π°Π·ΠΈΡ‚ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ Ρ„ΠΈΠ³ΡƒΡ€Ρ‹ CSS-бокса, Π° Π½Π΅ ΠΊΠΎΠ½Ρ‚ΡƒΡ€ самой Ρ€Π°ΠΌΠΊΠΈ; Ссли внСшняя сторона Ρ€Π°ΠΌΠΊΠΈ Π½Π΅ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΡ‹, Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠ³Π»ΠΈ Π±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Ρ€Π΅Π°Π»ΠΈΡΡ‚ΠΈΡ‡Π½ΡƒΡŽ Ρ‚Π΅Π½ΡŒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ настоящий CSS-Ρ„ΠΈΠ»ΡŒΡ‚Ρ€ ΠΏΠ°Π΄Π°ΡŽΡ‰Π΅ΠΉ Ρ‚Π΅Π½ΠΈ ΠΈΠ»ΠΈ ΠΏΠΎΠ΄Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Π² Ρ€Π°ΡΡ‚Ρ€ΠΎΠ²ΡƒΡŽ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² Ρ‚Π°ΠΊΠΎΠΌ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, ΠΊΠ°ΠΊ PhotoShop.

Π― Π±Ρ‹ Ρ‚Π°ΠΊΠΆΠ΅ посовСтовал ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π½Π°ΠΏΡ€Π°Π²Π»ΡΡŽΡ‰ΠΈΠ΅, инструмСнт Β«Π’Ρ‹Π΄Π΅Π»Π΅Π½ΠΈΠ΅Β» ΠΈ ΠΎΠΊΠ½ΠΎ Β«Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡΒ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Ρ€ΡΡ‚ΡŒ Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹. ΠœΡ‹ Π΄Π΅Π»Π°Π»ΠΈ ΠΏΠΎΡ…ΠΎΠΆΡƒΡŽ Ρ€Π°Π±ΠΎΡ‚Ρƒ Ρ€Π°Π½Π΅Π΅ – тСкст, ΠΎΠ³ΠΈΠ±Π°ΡŽΡ‰ΠΈΠΉ Ρ„ΠΈΠ³ΡƒΡ€Ρƒ ΠΈ БСмантичСскиС CSS3-спрайты (Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ, спСцификации свойства clip Β ΠΈ border-image тСсно связаны ΠΌΠ΅ΠΆΠ΄Ρƒ собой). Π•Ρ‰Ρ‘ ΠΊΠ°ΠΊ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ½Π»Π°ΠΉΠ½-инструмСнт КСвина Π”Π΅ΠΊΠ΅Ρ€Π° – Β«Π“Π΅Π½Π΅Ρ€Π°Ρ‚ΠΎΡ€ Border ImageΒ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ CSS для вашСй Ρ€Π°ΠΌΠΊΠΈ.

P.S. Π­Ρ‚ΠΎ Ρ‚ΠΎΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ Π±Ρ‹Ρ‚ΡŒ интСрСсно:

HTML-ΡƒΡ€ΠΎΠΊΠΈ. Как Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π² html

ΠžΡ‡Π΅Π½ΡŒ часто ΠΏΡ€ΠΈ Ρ€Π°Π±ΠΎΡ‚Π΅ с сайтами Π½Π°ΠΌ Π½Π°Π΄ΠΎ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Π½Π° страницу. Π’ html для вставки ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ‚Π΅Π³ . Π Π°Π·Π±Π΅Ρ€Π΅ΠΌ основныС для нас Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΠΈΠΌΠ΅ΡŽΡ‚ Ρ‚Π΅Π³:

  1. align β€” опрСдСляСт ΠΊΠ°ΠΊ рисунок Π±ΡƒΠ΄Π΅Ρ‚ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Ρ‚ΡŒΡΡ ΠΏΠΎ ΠΊΡ€Π°ΡŽ ΠΈ способ обтСкания тСкстом;
  2. alt β€” Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Π½Ρ‹ΠΉ тСкст для изобраТСния, Ρ‚Π°ΠΊΠΎΠΉ тСкст позволяСт ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ Ρ‚Π΅ΠΊΡΡ‚ΠΎΠ²ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ рисункС ΠΏΡ€ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π΅Π½Π½ΠΎΠΉ Π² Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π΅ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ;
  3. border β€” Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½Π° Ρ€Π°ΠΌΠΊΠΈ Π²ΠΎΠΊΡ€ΡƒΠ³ изобраТСния;
  4. height β€” высота изобраТСния;
  5. widthΒ β€” ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния;
  6. src β€” ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅;
  7. hspace β€” Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΉ отступ ΠΎΡ‚ изобраТСния Π΄ΠΎ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°;
  8. vspace β€” Π’Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ отступ ΠΎΡ‚ изобраТСния Π΄ΠΎ ΠΎΠΊΡ€ΡƒΠΆΠ°ΡŽΡ‰Π΅Π³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.

Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΏΡ€ΠΎ HTML-Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Ρ‹ я использовал нСсколько ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π² качСствС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π° возьмСм ΠΎΠ΄Π½Ρƒ ΠΈΠ· Π½ΠΈΡ…, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΡΠΊΡ€ΠΈΠ½ΡˆΠΎΡ‚ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΡ‹ SublimeText. Бсылка Π½Π° эту ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ:Β https://codernote.ru/wp-content/uploads/2015/09/sublime-text-post.png

Π˜Ρ‚Π°ΠΊ, Π² нашСй Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ ΠΏΠ°ΠΏΠΊΠ΅ создаСм ΠΏΠΎΠ΄ΠΏΠ°ΠΏΠΊΡƒ Β«Π£Ρ€ΠΎΠΊ 2β€³, ΠΊΠΎΠΏΠΈΡ€ΡƒΠ΅ΠΌ Ρ‚ΡƒΠ΄Π° наш Ρ„Π°ΠΉΠ», ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΡ‹ сдСлали Π² ΠΏΡ€ΠΎΡˆΠ»ΠΎΠΌ ΡƒΡ€ΠΎΠΊΠ΅ ΠΈ добавляСм Π² Π½Π΅Π³ΠΎ Ρ‚Π΅Π³ <img> Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ src которого содСрТится ссылка Π½Π° Π²Ρ‹Π±Ρ€Π°Π½Π½ΡƒΡŽ Π½Π°ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ.

[crayon lang=Β»HTMLΒ»]

Π­Ρ‚ΠΎ тСкст ΠΌΠΎΠ΅ΠΉ html-странички, Π° Π½ΠΈΠΆΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ°.

[/crayon]

Если ΠΌΡ‹ сохраним эту ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ Ρƒ сСбя Π½Π° ΠΊΠΎΠΌΠΏΡŒΡŽΡ‚Π΅Ρ€Π΅, Ρ‚ΠΎ ΡƒΠ²ΠΈΠ΄ΠΈΠΌ, Ρ‡Ρ‚ΠΎ ΠΎΠ½Π° ΠΈΠΌΠ΅Π΅Ρ‚ довольно большой Ρ€Π°Π·ΠΌΠ΅Ρ€ β€” 1600px x 903px. Для Ρ‚ΠΎΠ³ΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΡ€ΠΈ Π²Ρ‹Π²ΠΎΠ΄Π΅ Π½Π° нашСй страницС ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ height ΠΈ width. Π­Ρ‚ΠΈ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡ‚ΡŒ ΠΊΠ°ΠΊ вмСстС, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½ΠΎΡΡ‚ΠΈ. Π― Π·Π°Π΄Π°Π» ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΏΡ€ΠΈ Π²Ρ‹Π²ΠΎΠ΄Π΅ Π½Π° экран β€” 500px, Π° высоту Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Π½Π΅ стал β€” Π² этом случаС Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ сам, ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΠΏΠΎΠ΄Π±Π΅Ρ€Π΅Ρ‚ высоту.

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΠΏΠΎΠΌΠ΅Π½ΡΡ‚ΡŒ мСстами Ρ‚Π΅Π³ΠΈ <p> ΠΈ <img> ΠΏΡ€ΠΈ этом Π·Π°Π΄Π°Π² Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align=Β»leftΒ» β€” ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ располоТСно Ρƒ Π»Π΅Π²ΠΎΠ³ΠΎ края страницы, Π° тСкст ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ справа. А Ссли Π·Π°Π΄Π°Ρ‚ΡŒ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ align=Β»rightΒ», Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ располоТСно Ρƒ ΠΏΡ€Π°Π²ΠΎΠ³ΠΎ края страницы, Π° тСкст ΠΎΠ±Ρ‚Π΅ΠΊΠ°Ρ‚ΡŒ слСва.

Π’ случаС ΠΊΠΎΠ³Π΄Π° тСкст ΠΎΠ±Ρ‚Π΅ΠΊΠ°Π΅Ρ‚ справа ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ ΠΌΠ΅ΠΆΠ΄Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ ΠΈ тСкстом Π½Π΅Ρ‚ отступа, Π΄Π°Π²Π°ΠΉΡ‚Π΅ Π·Π°Π΄Π°Π΄ΠΈΠΌ этот отступ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° hspace=Β»20β€³. Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° слСва ΠΈ справа ΠΈΠΌΠ΅Π΅Ρ‚ отступ 20px.

Π‘ ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π° border ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ€Π°ΠΌΠΊΡƒ Π²ΠΎΠΊΡ€ΡƒΠ³ изобраТСния β€” border=Β»2β€³ β€” Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π±ΡƒΠ΄Π΅Ρ‚ чСрная Ρ€Π°ΠΌΠΊΠ° с Ρ‚ΠΎΠ»Ρ‰ΠΈΠ½ΠΎΠΉ 2px. Π¦Π²Π΅Ρ‚ Ρ€Π°ΠΌΠΊΠΈ ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ css ΠΈ ΠΎ Ρ‚ΠΎΠΌ, ΠΊΠ°ΠΊ это ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ я расскаТу Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΡ… ΡƒΡ€ΠΎΠΊΠ°Ρ….

ΠŸΠΎΡ…ΠΎΠΆΠΈΠ΅ записи

css — АдаптивноС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅ ΠΈ ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ — ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон, Π½Π΅ ΠΏΡ€Π΅Π²Ρ‹ΡˆΠ°Π΅Ρ‚ ΠΎΠΊΠ½ΠΎ

Π― ΠΏΡ€ΠΈΡˆΠ΅Π», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠΊΠ°Π·Π°Ρ‚ΡŒ Π½Π° ΠΎΡ‚Π²Π΅Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ, каТСтся, здСсь Π½ΠΈΠΊΡ‚ΠΎ Π½Π΅ Π²ΠΈΠ΄ΠΈΡ‚. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π²Ρ‹ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ всС запросы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π²Ρ‹ сдСлали, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ чистого CSS, ΠΈ это ΠΎΡ‡Π΅Π½ΡŒ просто. ΠŸΡ€ΠΎΡΡ‚ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Media Queries. МСдиа-запросы ΠΌΠΎΠ³ΡƒΡ‚ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΡΡ‚ΡŒ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ экрана ΠΈΠ»ΠΈ области просмотра ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ. Π—Π°Ρ‚Π΅ΠΌ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΡ‚ΠΈΠ»ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ свои изобраТСния Π² зависимости ΠΎΡ‚ ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΠΈ.

ΠŸΡ€ΠΎΡΡ‚ΠΎ установитС CSS ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ для ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

  img {
   ΡˆΠΈΡ€ΠΈΠ½Π°: Π°Π²Ρ‚ΠΎ;
   высота: Π°Π²Ρ‚ΠΎ;
   максимальная ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
   максимальная высота: 100%;
}
  

Π—Π°Ρ‚Π΅ΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ ΠΌΠ΅Π΄ΠΈΠ°-запросы, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ свою ΠΎΡ€ΠΈΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ, ΠΈ всС!

  @media (ориСнтация: альбомная) {img {height: 100%; }}
@media (ориСнтация: портрСтная) {img {width: 100%; }}
  

Π’Ρ‹ всСгда Π±ΡƒΠ΄Π΅Ρ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ экрана, Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ тСряСт ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΈ, Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ большС экрана, Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ обрСзаСтся ΠΈΠ»ΠΈ Π½Π΅ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ экрана.

Π§Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ·Π½Π°Ρ‚ΡŒ большС ΠΎΠ± этих ΠΌΠ΅Π΄ΠΈΠ°-запросах, Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΎΡ‡ΠΈΡ‚Π°Ρ‚ΡŒ спСцификации MDN.

Π¦Π΅Π½Ρ‚Ρ€ΠΎΠ²ΠΊΠ°

Π§Ρ‚ΠΎΠ±Ρ‹ Ρ†Π΅Π½Ρ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, просто ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ модСль Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ бокса. Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ div со 100% ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ ΠΈ высотой, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

  div.parent {
   дисплСй: гибкий;
   ΠΏΠΎΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅: фиксированноС;
   слСва: 0px;
   Π²Π΅Ρ€Ρ…: 0px;
   ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
   высота: 100%;
   justify-content: center;
   align-items: center;
}
  

Когда для Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ° display установлСно Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ flex , элСмСнт Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ Π³ΠΎΡ‚ΠΎΠ² ΠΊ использованию ΠΌΠΎΠ΄Π΅Π»ΠΈ Π³ΠΈΠ±ΠΊΠΎΠ³ΠΎ Π±Π»ΠΎΠΊΠ°.Бвойство justify-content устанавливаСт Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΈΡ… элСмСнтов. Бвойство align-items устанавливаСт Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΡŒΠ½ΠΎΠ΅ Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ Π³ΠΈΠ±ΠΊΠΈΡ… элСмСнтов.

Π—Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠ΅

МнС Ρ‚ΠΎΠΆΠ΅ Π½ΡƒΠΆΠ½Ρ‹ Π±Ρ‹Π»ΠΈ эти Ρ‚ΠΎΡ‡Π½Ρ‹Π΅ трСбования, ΠΈ я поискал Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π½Π° чистом CSS. ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ ΠΈΠ· ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹Ρ… здСсь ΠΎΡ‚Π²Π΅Ρ‚ΠΎΠ² Π½Π΅ удовлСтворяСт всСм вашим трСбованиям, Π±ΡƒΠ΄ΡŒ Ρ‚ΠΎ ΠΎΠ±Ρ…ΠΎΠ΄Π½Ρ‹Π΅ ΠΏΡƒΡ‚ΠΈ ΠΈΠ»ΠΈ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠΆΠ΅Ρ€Ρ‚Π²ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠ΄Π½ΠΈΠΌ ΠΈΠ»ΠΈ двумя трСбованиями, это Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ Π΄Π΅ΠΉΡΡ‚Π²ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ являСтся Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ простым для Π²Π°ΡˆΠΈΡ… Ρ†Π΅Π»Π΅ΠΉ; ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ ΠΎΠ½ выполняСт всС ваши трСбования с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ чистого CSS.

Π Π•Π”ΠΠšΠ’Π˜Π ΠžΠ’ΠΠ’Π¬: принятый ΠΎΡ‚Π²Π΅Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ, Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Ссли ваши изобраТСния большиС. ΠŸΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ малСнькиС изобраТСния, ΠΈ Π²Ρ‹ ΡƒΠ²ΠΈΠ΄ΠΈΡ‚Π΅, Ρ‡Ρ‚ΠΎ ΠΎΠ½ΠΈ Π½ΠΈΠΊΠΎΠ³Π΄Π° Π½Π΅ ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ большС своСго исходного Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

Π”ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ полноэкранноС ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ изобраТСния ΠΈ ΠΏΠ°Π½ΠΎΡ€Π°ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊ изобраТСниям ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ‚ΠΎΠ² с Sirv

ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π²Π΅Π»ΠΈΠΊΠΎΠ»Π΅ΠΏΠ½Ρ‹Ρ… полноэкранных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΎΠ΄Π½ΠΈΠΌ Ρ‰Π΅Π»Ρ‡ΠΊΠΎΠΌ ΠΌΡ‹ΡˆΠΈ с Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ увСличСния полноэкранного изобраТСния Sirv.

Π©Π΅Π»ΠΊΠ½ΠΈΡ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ полноэкранный Ρ€Π΅ΠΆΠΈΠΌ. Π­Ρ‚ΠΎ быстрый способ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ Π½Π° вашСм Π²Π΅Π±-сайтС ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅ изобраТСния с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ.

Π§Ρ‚ΠΎΠ±Ρ‹ Π²ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½Ρ‹ΠΉ полноэкранный Ρ€Π΅ΠΆΠΈΠΌ, установитС для ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° Ρ‚ΠΎΠ»ΡŒΠΊΠΎ полноэкранный Ρ€Π΅ΠΆΠΈΠΌ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ true . НапримСр:

 
watch

Sirv Zoom ΠΌΠΎΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ ΠΎΠ΄Π½ΠΎΠΌΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΈΠ»ΠΈ ΠΊ Π½Π°Π±ΠΎΡ€Ρƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠ΅Ρ€Π΅ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ ΠΌΠ΅ΠΆΠ΄Ρƒ Π½ΠΈΠΌΠΈ Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅.

Sirv автоматичСски Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ эскизы ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ Π³Π΅Π½Π΅Ρ€ΠΈΡ€ΡƒΠ΅Ρ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, идСально подходящСС ΠΊ мСсту, Π³Π΄Π΅ ΠΎΠ½ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π΅Π½ΠΎ:

ΠœΠ°ΡΡˆΡ‚Π°Π± этого изобраТСния ΠΈ Π΅Π³ΠΎ ΠΌΠΈΠ½ΠΈΠ°Ρ‚ΡŽΡ€Ρ‹ Π±Ρ‹Π»ΠΈ вставлСны с использованиСм этого ΠΊΠΎΠ΄Π°:

 
ΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ watch watch watch

Π‘ΠΊΠΎΠΏΠΈΡ€ΡƒΠΉΡ‚Π΅ ΠΈ Π²ΡΡ‚Π°Π²ΡŒΡ‚Π΅

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ Π²ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ для увСличСния изобраТСния. ΠŸΡ€ΠΎΡΡ‚ΠΎ Π·Π°Π³Ρ€ΡƒΠ·ΠΈΡ‚Π΅ изобраТСния Π² свою ΡƒΡ‡Π΅Ρ‚Π½ΡƒΡŽ запись Sirv, Π·Π°Ρ‚Π΅ΠΌ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Β«Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒΒ», Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΊΠΎΠ΄ для встраивания увСличСния.Если Π²Π°ΠΌ Π½ΡƒΠΆΠ½Π° ΠΏΠΎΠΌΠΎΡ‰ΡŒ, Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ ΠΊΠΎΠ½Ρ‚Π°ΠΊΡ‚Π½ΠΎΠΉ Ρ„ΠΎΡ€ΠΌΠΎΠΉ Π² вашСм Π°ΠΊΠΊΠ°ΡƒΠ½Ρ‚Π΅.

ΠŸΠ°Π½ΠΎΡ€Π°ΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅

ΠŸΠ°Π½ΠΎΡ€Π°ΠΌΠ° ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ стали СстСствСнным ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠ΅ΠΌ ΠΏΡ€ΠΈ взаимодСйствии с изобраТСниями высокого Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ инстинктивно Ρ‰Π΅Π»ΠΊΠ°ΡŽΡ‚, Π΄Π²Π°ΠΆΠ΄Ρ‹ Ρ‰Π΅Π»ΠΊΠ°ΡŽΡ‚ ΠΈΠ»ΠΈ ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‡ΠΈΠ²Π°ΡŽΡ‚ колСсо ΠΌΡ‹ΡˆΠΈ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΡ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅. ВсС эти взаимодСйствия ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°ΡŽΡ‚ΡΡ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠ΅ΠΉ полноэкранного панорамирования ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ Sirv.

Π”Π°ΠΆΠ΅ изобраТСния с высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ Π·Π°Π³Ρ€ΡƒΠΆΠ°ΡŽΡ‚ΡΡ быстро благодаря Ρ‚ΠΎΠΌΡƒ, ΠΊΠ°ΠΊ Sirv ΠΎΠ±Ρ€Π°Π±Π°Ρ‚Ρ‹Π²Π°Π΅Ρ‚ ΠΈ обслуТиваСт изобраТСния. НСт нСобходимости ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ Π²Π°ΡˆΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΊΠ°ΠΊ Π²Ρ‹ это Π΄Π΅Π»Π°Π»ΠΈ Ρ€Π°Π½ΡŒΡˆΠ΅.ЀактичСски, Π²Π°ΠΌ рСкомСндуСтся Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒ изобраТСния с самым высоким Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ максимально Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅. НСзависимо ΠΎΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Π° изобраТСния Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ быстро, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ ΠΌΠΎΠ³Π»ΠΈ ΠΏΠ°Π½ΠΎΡ€Π°ΠΌΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΡ… Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅.

ΠŸΠΎΠΏΡƒΠ»ΡΡ€Π½Π°Ρ Π² Google Maps Ρ‚Π΅Ρ…Π½ΠΈΠΊΠ° панорамирования ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΠ°Ρ Sirv, являСтся СдинствСнным способом быстро ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ изобраТСния с ΠΌΠ΅Π»ΠΊΠΈΠΌΠΈ дСталями ΠΏΡ€ΠΈ любом скоростном ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΠΈ ΠΊ Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Ρƒ.

ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств

Sirv ΠΎΠΏΡ‚ΠΈΠΌΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½ для использования сСнсорных ТСстов для ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ ΠΈ панорамирования ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах ΠΈ ΠΏΠ»Π°Π½ΡˆΠ΅Ρ‚Π°Ρ….

ΠžΠ΄Π½ΠΎΠΊΡ€Π°Ρ‚Π½ΠΎΠ΅ касаниС ΠΈ Π΄Π²ΠΎΠΉΠ½ΠΎΠ΅ касаниС Π½Π΅ΠΌΠ΅Π΄Π»Π΅Π½Π½ΠΎ ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎ полноэкранного Ρ€Π΅ΠΆΠΈΠΌΠ°. УвСличСнная ΠΊΠ½ΠΎΠΏΠΊΠ° X позволяСт Π»Π΅Π³ΠΊΠΎ Π·Π°ΠΊΡ€Ρ‹Ρ‚ΡŒ полноэкранный Ρ€Π΅ΠΆΠΈΠΌ.

Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ полноэкранный iframe?

Как ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ полноэкранный iframe?

iframe Π² HTML ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚ встроСнный Ρ„Ρ€Π΅ΠΉΠΌ. Π’Π΅Π³ iframe опрСдСляСт ΠΏΡ€ΡΠΌΠΎΡƒΠ³ΠΎΠ»ΡŒΠ½ΡƒΡŽ ΠΎΠ±Π»Π°ΡΡ‚ΡŒ Π² Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠΉ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒ ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, Π²ΠΊΠ»ΡŽΡ‡Π°Ρ полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ ΠΈ Π³Ρ€Π°Π½ΠΈΡ†Ρ‹.ВстроСнный Ρ„Ρ€Π΅ΠΉΠΌ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ для встраивания Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π° Π² Ρ‚Π΅ΠΊΡƒΡ‰ΠΈΠΉ HTML-Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚. Для полноэкранного iframe Π²Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Ρ‹ ΠΏΠΎΠΊΡ€Ρ‹Ρ‚ΡŒ всю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ просмотра.

ДСйствия для полноэкранного Ρ€Π΅ΠΆΠΈΠΌΠ° iframe:

  1. Π‘Π±Ρ€ΠΎΡΠΈΡ‚ΡŒ ΠΏΠ»Π°Π²Π°ΡŽΡ‰ΠΈΠ΅ поля страницы Π½Π° 0 пиксСлСй для Ρ‚Π΅Π³ΠΎΠ² html body, div, iframe:
    html
    {
     ΠΏΠ΅Ρ€Π΅Π»ΠΈΠ²: Π°Π²Ρ‚ΠΎ;
    }
     
    HTML, Ρ‚Π΅Π»ΠΎ, div, iframe
    {
     ΠΌΠ°Ρ€ΠΆΠ°: 0px;
     отступ: 0 пиксСлСй;
     высота: 100%;
     Π³Ρ€Π°Π½ΠΈΡ†Π°: Π½Π΅Ρ‚;
    }
     
  2. ΠŸΡ€Π΅ΠΎΠ±Ρ€Π°Π·ΠΎΠ²Π°Π½ΠΈΠ΅ повСдСния Ρ‚Π΅Π³Π° iframe Π² CSS
    iframe
    {
     дисплСй: блок;
     ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
     Π³Ρ€Π°Π½ΠΈΡ†Π°: Π½Π΅Ρ‚;
     ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-Ρƒ: Π°Π²Ρ‚ΠΎ;
     ΠΏΠ΅Ρ€Π΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΠ΅-x: скрыто;
    }
     
  3. Π—Π°Π΄Π°ΠΉΡ‚Π΅ свойства iframe для устранСния кроссбраузСрности:
     


2. Π’Π΅ΠΏΠ΅Ρ€ΡŒ Π²ΠΎΠ·ΡŒΠΌΠΈΡ‚Π΅ URL-адрСс CDN. вашСго Ρ„Π»ΠΈΠΏΠ±ΡƒΠΊΠ° ΠΈ помСститС Π΅Π³ΠΎ вмСсто URL-адрСса CDN Π² ΠΊΠΎΠ΄Π΅.

Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΠΉΡ‚ΠΈ URL-адрСс CDN вашСго Ρ„Π»ΠΈΠΏΠ±ΡƒΠΊΠ° Π² своСй ΡƒΡ‡Π΅Ρ‚Π½ΠΎΠΉ записи. ВсС, Ρ‡Ρ‚ΠΎ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ, это ΡΠΊΠΎΠΏΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ Ρ€Π°Π·Π΄Π΅Π», ΠΈΠΌΠ΅ΡŽΡ‰ΠΈΠΉ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ Ρ„ΠΎΡ€ΠΌΠ°Ρ‚, ΠΈΠ· ΠΊΠΎΠ΄Π° для встраивания :

https: // cdn.flipsnack.com/widget/v2/widget.html?hash=f1ka75l97

Π˜ΠΌΠ΅ΠΉΡ‚Π΅ Π² Π²ΠΈΠ΄Ρƒ, Ρ‡Ρ‚ΠΎ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ тСкст ΠΊΠ½ΠΎΠΏΠΊΠΈ Fullscreen Π½Π° всС, Ρ‡Ρ‚ΠΎ Π·Π°Ρ…ΠΎΡ‚ΠΈΡ‚Π΅. НС ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ Ρ‚Π°ΠΊΠΆΠ΅ Π²Ρ‹Ρ€ΠΎΠ²Π½ΡΡ‚ΡŒ Π΅Π³ΠΎ ΠΏΠΎ Π»Π΅Π²ΠΎΠΌΡƒ ΠΈΠ»ΠΈ ΠΏΡ€Π°Π²ΠΎΠΌΡƒ ΠΊΡ€Π°ΡŽ, ΠΈΠ·ΠΌΠ΅Π½ΠΈΠ² ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ align = "center" Π½Π° align = "right" ΠΈΠ»ΠΈ align = "left" .

3. Π˜Π·ΠΌΠ΅Π½ΠΈΡ‚Π΅ ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту ΠΏΠΎ своСму ТСланию ΠΈ сохранитС.

Когда Π²Ρ‹ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π»ΠΈ свой Π²Π΅Π±-сайт, просто Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ ΠΏΠΎΠ΄ Ρ„Π»ΠΈΠΏΠ±ΡƒΠΊΠΎΠΌ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Π΅Π³ΠΎ Π² полноэкранном Ρ€Π΅ΠΆΠΈΠΌΠ΅ Π½Π° Π½ΠΎΠ²ΠΎΠΉ Π²ΠΊΠ»Π°Π΄ΠΊΠ΅.

Π’Π°ΠΆΠ½ΠΎΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: Если Π²Ρ‹ Π½Π΅ Π·Π½Π°Π΅Ρ‚Π΅, ΠΊΠ°ΠΊ Π²ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ свой Ρ„Π»ΠΈΠΏΠ±ΡƒΠΊ Π½Π° Π‘Π°ΠΉΡ‚Ρ‹ Google, Π²ΠΎΡ‚ Π²Π°ΠΌ нСбольшой ΠΏΡ€ΠΈΠΌΠ΅Ρ€:
Π—Π°ΠΉΠ΄ΠΈΡ‚Π΅ Π½Π° свой сайт Google ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ ΠΊΠ½ΠΎΠΏΠΊΡƒ Π’ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ с ΠΏΡ€Π°Π²ΠΎΠΉ стороны .

НаТмитС Код для вставки Π²ΠΎ вновь ΠΎΡ‚ΠΊΡ€Ρ‹Π²ΡˆΠ΅ΠΌΡΡ Π²ΡΠΏΠ»Ρ‹Π²Π°ΡŽΡ‰Π΅ΠΌ ΠΎΠΊΠ½Π΅. Π’ΡΡ‚Π°Π²ΡŒΡ‚Π΅ ΠΊΠΎΠ΄ внСдрСния ΠΈ Π½Π°ΠΆΠΌΠΈΡ‚Π΅ Π”Π°Π»Π΅Π΅ .

На сСгодня всС! Если Ρƒ вас всС Π΅Ρ‰Π΅ Π΅ΡΡ‚ΡŒ вопросы ΠΏΠΎ этому ΠΏΠΎΠ²ΠΎΠ΄Ρƒ, Π½Π΅ ΡΡ‚Π΅ΡΠ½ΡΠΉΡ‚Π΅ΡΡŒ ΠΎΠ±Ρ€Π°Ρ‰Π°Ρ‚ΡŒΡΡ ΠΊ Π½Π°ΠΌ Ρ‡Π΅Ρ€Π΅Π· Ρ‡Π°Ρ‚.ΠœΡ‹ всСгда Ρ€Π°Π΄Ρ‹ ΠΏΠΎΠΌΠΎΡ‡ΡŒ!

15 jQuery ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Ρ‹Π΅ слайд-ΡˆΠΎΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ / ΠΏΠ»Π°Π³ΠΈΠ½Ρ‹ Π³Π°Π»Π΅Ρ€Π΅ΠΈ - Bashooka

Π’ этом постС я составил список ΠΈΠ· 15 jQuery полноэкранных ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠ² для слайд-ΡˆΠΎΡƒ / Π³Π°Π»Π΅Ρ€Π΅ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ. НадСюсь, это сэкономит вашС врСмя ΠΎΡ‚ поиска Π² Google!

Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ содСрТит мноТСство ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹Ρ… эффСктов ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄Π°, ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΡƒΡŽ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΡƒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, встраиваниС Π²ΠΈΠ΄Π΅ΠΎ, автоматичСскоС воспроизвСдСниС, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ останавливаСтся ΠΏΡ€ΠΈ взаимодСйствии с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ, ΠΈ мноТСство простых Π² настройкС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² для создания собствСнных эффСктов. ВсС настройки ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² jQuery, Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ΠΎΠ² Π΄Π°Π½Π½Ρ‹Ρ… HTML 5 ΠΈ CSS!

ΠŸΠΎΠ»Π½ΠΎΡΠΊΡ€Π°Π½Π½Π°Ρ галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с катСгориями, Π²ΠΈΠ΄Π΅ΠΎ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ HTML5, Π°ΡƒΠ΄ΠΈΠΎ Π² Ρ„ΠΎΡ€ΠΌΠ°Ρ‚Π΅ HTML5 ΠΈ Ρ‚. Π”.

Π’Ρ‹ Π½Π΅ Π½Π°ΠΉΠ΄Π΅Ρ‚Π΅ Π΄Ρ€ΡƒΠ³ΠΎΠ³ΠΎ слайдСра, ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠ³ΠΎ этому, Π² Π˜Π½Ρ‚Π΅Ρ€Π½Π΅Ρ‚Π΅. Π­Ρ‚ΠΎ ΡƒΠ½ΠΈΠΊΠ°Π»ΡŒΠ½Ρ‹ΠΉ! Π­Ρ‚ΠΎ ΠΏΠ΅Ρ€Π²Ρ‹ΠΉ полноэкранный слайдСр с измСняСмым Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠΌ! УмСщаСтся Π½Π° любом экранС! Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ мСньшСго Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, Ρ‡Π΅ΠΌ самоС большоС фактичСскоС Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅? НСт проблСм… Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ Β«Π²ΠΎΠ»ΡˆΠ΅Π±Π½ΡƒΡŽΒ» тСкстуру ΠΊ ΠΏΠΎΠ»Π·ΡƒΠ½ΠΊΡƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π΅ΠΆΠ°Ρ‚ΡŒ появлСния нСкрасивых пиксСлСй ΠΈΠ·-Π·Π° измСнСния Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

GridGallery - это ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для отобраТСния изобраТСния, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΡ… Ρ€Π°Π±ΠΎΡ‚. Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅Ρ‚ ΠΊΠ°ΠΊ ΠΏΠ΅ΠΉΠ·Π°ΠΆ, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎΡ€Ρ‚Ρ€Π΅Ρ‚.

ΠŸΡ€ΠΎΡΡ‚Π°Ρ, Π½ΠΎ элСгантная полноэкранная галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, созданная с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ jQuery ΠΈ CSS. Π’ Π³Π°Π»Π΅Ρ€Π΅Π΅ прСдставлСны полноэкранныС изобраТСния Π² Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… Ρ€Π΅ΠΆΠΈΠΌΠ°Ρ… ΠΈ настраиваСмыС полосы ΠΏΡ€ΠΎΠΊΡ€ΡƒΡ‚ΠΊΠΈ.

Π­Ρ‚ΠΎΡ‚ ΠΏΠ»Π°Π³ΠΈΠ½ jQuery позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ полноэкранныС Π³Π°Π»Π΅Ρ€Π΅ΠΈ, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… слайды ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°ΡŽΡ‚ΡΡ Π½Π° вСсь экран, с использованиСм полноэкранных API, прСдоставляСмых Firefox 10+ ΠΈ Chrome 15+ (ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Safari 5.1+).

Supersized - это полноэкранноС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ΅ слайд-ΡˆΠΎΡƒ, созданноС с использованиСм Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ jQuery.

FerroSlider - это бСсплатный ΠΏΠ»Π°Π³ΠΈΠ½ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π²Π°ΠΌ ΠΎΡ€Π³Π°Π½ΠΈΠ·ΠΎΠ²Π°Ρ‚ΡŒ содСрТимоС Π²Π΅Π±-сайтов Π½Π΅ΠΎΠ±Ρ‹Ρ‡Π½Ρ‹ΠΌ ΠΈ классным способом ΠΈ ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ ΠΏΠΎ Π½ΠΈΠΌ с эффСктом скольТСния.

Π’ сСгодняшнСм ΡƒΡ€ΠΎΠΊΠ΅ ΠΌΡ‹ создадим полноэкранноС слайд-ΡˆΠΎΡƒ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΎΠΈΠ»Π»ΡŽΡΡ‚Ρ€ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΡΠ΅Ρ€ΠΈΡŽ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ Нью-Π™ΠΎΡ€ΠΊΠ°. ΠœΡ‹ Π΄ΠΎΠ±Π°Π²ΠΈΠΌ Π·Π²ΡƒΠΊΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ элСмСнта HTML5 audio, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠΆΠΈΠ²ΠΈΡ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚Π°Ρ‚ΡŒΡΡ Π²ΠΎΡΡΠΎΠ·Π΄Π°Ρ‚ΡŒ атмосфСру этого яркого Π³ΠΎΡ€ΠΎΠ΄Π°.

Vegas - это ΠΏΠ»Π°Π³ΠΈΠ½ jQuery для добавлСния красивых полноэкранных Ρ„ΠΎΠ½ΠΎΠ² Π½Π° ваши Π²Π΅Π±-страницы.Π’Ρ‹ Π΄Π°ΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ ΠΏΠΎΡ‚Ρ€ΡΡΠ°ΡŽΡ‰ΠΈΠ΅ слайд-ΡˆΠΎΡƒ.

Он ΠΈΠΌΠ΅Π΅Ρ‚ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΡŽ измСнСния тСкста ΠΈ управлСния воспроизвСдСниСм. Если анимация Π½Π΅ каТСтся ΠΏΠ»Π°Π²Π½ΠΎΠΉ, изобраТСния ΠΌΠΎΠ³ΡƒΡ‚ Π½Π΅ Π·Π°Π³Ρ€ΡƒΠΆΠ°Ρ‚ΡŒΡΡ. Π­Ρ‚ΠΎΡ‚ скрипт ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ сочСтаСтся с ΠΏΠ»Π°Π³ΠΈΠ½ΠΎΠΌ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠΉ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·Π±Π°Π²ΠΈΡ‚ΡŒΡΡ ΠΎΡ‚ этого эффСкта. ΠŸΡ€ΠΎΡ‚Π΅ΡΡ‚ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ ΠΈ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π² Firefox, Safari, Chrome ΠΈ Opera. Π― использовал изобраТСния ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 1500 пиксСлСй, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΡ…Π²Π°Ρ‚ΠΈΡ‚ΡŒ Π±ΠΎΠ»ΡŒΡˆΠΈΠ½ΡΡ‚Π²ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌΡ‹Ρ… Π² настоящСС врСмя Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΉ экрана.

PhotoSwipe - это Π‘Π•Π‘ΠŸΠ›ΠΠ’ΠΠΠ― галСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° основС HTML / CSS / JavaScript, ΡΠΏΠ΅Ρ†ΠΈΠ°Π»ΡŒΠ½ΠΎ прСдназначСнная для ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройств.

bgStretcher 2011 (Background Stretcher) - это ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌΡ‹ΠΉ ΠΌΠΎΠ΄ΡƒΠ»ΡŒ jQuery, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ большоС ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ (ΠΈΠ»ΠΈ Π½Π°Π±ΠΎΡ€ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ) ΠΊ Ρ„ΠΎΠ½Ρƒ вашСй Π²Π΅Π±-страницы ΠΈ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ измСняСт Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния (ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ), Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΠΏΠΎΠ»Π½ΠΈΡ‚ΡŒ всю ΠΎΠ±Π»Π°ΡΡ‚ΡŒ ΠΎΠΊΠ½Π°.

Автор записи

Π”ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π’Π°Ρˆ адрСс email Π½Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½. ΠžΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ поля ΠΏΠΎΠΌΠ΅Ρ‡Π΅Π½Ρ‹ *