Π Π°Π±ΠΎΡ‚Π° с изобраТСниями css: [Π² Π·Π°ΠΊΠ»Π°Π΄ΠΊΠΈ] Π Π°Π±ΠΎΡ‚Π° с изобраТСниями Π² Π²Π΅Π± / Π₯Π°Π±Ρ€

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

CSS Ρ€Π°Π±ΠΎΡ‚Π° с изобраТСниями

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ ΡƒΠΊΡ€Π°ΡˆΠ°ΡŽΡ‚ сайт, ΠΏΠΎΠ²Ρ‹ΡˆΠ°ΡŽΡ‚ ΠΊΠΎΠ½Π²Π΅Ρ€ΡΠΈΡŽ ΠΈ ΠΏΠΎΠ²Ρ‹ΡˆΠ°ΡŽΡ‚ ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ информативности ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°. ΠŸΠΎΡΡ‚ΠΎΠΌΡƒ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ ΡƒΠΌΠ΅Ρ‚ΡŒ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния Π² web.

ИспользованиС Ρ‚Π΅Π³Π°

img

Π’Π΅Π³ img — стандартный способ добавлСния ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ Π½Π° сайт.

Π’Π΅Π³ снабТСн Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π°ΠΌΠΈ:

  • src — ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ
  • alt — тСкстовоС описаниС изобраТСния, показываСтся, ΠΊΠΎΠ³Π΄Π° сайт ΠΏΠΎ ΠΊΠ°ΠΊΠΈΠΌ-Π»ΠΈΠ±ΠΎ ΠΏΡ€ΠΈΡ‡ΠΈΠ½Π°ΠΌ Π½Π΅ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚.

Для ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ΡΡ стандартныС css свойства: width ΠΈ height.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:


.example_image {
  width: 300px;
  height: 200px;
}

<img src="/media/blog/example_image_1.jpg" alt="Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π² Ρ‚Π΅Π³Π΅ img">

ИспользованиС Ρ„ΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ изобраТСния

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

div, span, a. Π”Π°Π»Π΅Π΅ Π² Π΄Π΅Π»ΠΎ Π²ΡΡ‚ΡƒΠΏΠ°ΡŽΡ‚ css свойства background ΠΈ background-size. Background ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ ΠΏΡƒΡ‚ΡŒ ΠΊ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡŽ ΠΈ Π·Π°Π΄Π°Π΅Ρ‚ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° Π΅Π³ΠΎ Π²Ρ‹Π²ΠΎΠ΄Π°, Π° background-size описываСт способ отобраТСния Ρ„ΠΎΠ½Π°. Π’Ρ‹ΡˆΠ΅ ΠΏΠΎΠΊΠ°Π·Π°Π½Π½Ρ‹ΠΉ ΠΏΡ€ΠΈΠΌΠ΅Ρ€ ΠΌΠΎΠΆΠ½ΠΎ ΠΎΡ‚ΠΎΠ±Ρ€Π°Π·ΠΈΡ‚ΡŒ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΌ способом (красная Ρ€Π°ΠΌΠΊΠ° для выдСлСния ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°).

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:


.example_image_1 {
  width: 300px;
  height: 200px;
  background: url(/media/blog/example_image_1.jpg) center no-repeat;
}

Β 

Бвойство center Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π΅Ρ‚ Ρ„ΠΎΠ½ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ ΠΈ ΠΏΠΎ Π²Π΅Ρ€Ρ‚ΠΈΠΊΠ°Π»ΠΈ, Π° no-repeat Π·Π°ΠΏΡ€Π΅Ρ‰Π°Π΅Ρ‚ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π΅Π½ΠΈΠ΅ изобраТСния.

Но Π·Π°Ρ‡Π°ΡΡ‚ΡƒΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ отличаСтся ΠΏΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΠΈ пропорциям ΠΎΡ‚ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π° Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ€Π°ΡΡ‚ΡΠ½ΡƒΡ‚ΡŒ ΠΏΠΎ всСй Π΅Π³ΠΎ ΠΏΠ»ΠΎΡ‰Π°Π΄ΠΈ.

Для этого ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ background-size с ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ cover.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

Β 

Π‘ΠΎ свойством background-size: cover:


.example_image_2 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_3.jpg) center no-repeat; 
  background-size: cover;
}

Β 

Если Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π»ΠΎ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½ΡƒΡŽ ΠΏΠ»ΠΎΡ‰Π°Π΄ΡŒ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Π°, Π½ΠΎ ΠΏΡ€ΠΈ это Π½Π΅ ΠΎΠ±Ρ€Π΅Π·Π°Π»ΠΎΡΡŒ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ background-size с ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ contain.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:

Β 

Π‘ΠΎ свойством background-size: contain:


.example_image_3 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_3.jpg) center no-repeat; 
  background-size: contain;
}

Β 

Π’Π°ΠΊΠΆΠ΅ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ background-size ΠΌΠΎΠΆΠ½ΠΎ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:


.example_image_4 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_4.svg) center no-repeat; 
  background-size: 131px 112px; 
}

Β 

Π•Ρ‰Π΅ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Ρ„ΠΎΠ½ΠΎΠ²Ρ‹ΠΉ Ρ†Π²Π΅Ρ‚ ΠΊΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€Ρƒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ€:


.example_image_4 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_4.svg) center no-repeat ##1f1f1f; 
  background-size: 131px 112px; 
}

Β 

АдаптивныС изобраТСния

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΡ на сайтах ΠΌΠΎΠ³ΡƒΡ‚ Π°Π΄Π°ΠΏΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΊΠ°ΠΊ ΠΏΠΎΠ΄Β Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ экрана устройства для коррСктного отобраТСния Π½Π°Β ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹Ρ… устройствах, Ρ‚Π°ΠΊ и под экраны с высоким DPI (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠΎΠ΄Β Retina-дисплСи) для болСС Π΄Π΅Ρ‚Π°Π»ΠΈΠ·ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ отобраТСния.

Π•ΡΡ‚ΡŒ нСсколько Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ΠΎΠ² Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, ΠΎΡ‚Π»ΠΈΡ‡Π°ΡŽΡ‚ΡΡ ΠΎΠ½ΠΈ по слоТности Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ, ΠΊΡ€ΠΎΡΡΠ±Ρ€Π°ΡƒΠ·Π΅Ρ€Π½ΠΎΡΡ‚ΡŒΡŽ и по создаваСмой Π½Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ Π½Π°Β ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚-соСдинСниС. Рассмотрим самыС распространённыС.

Π‘Π°ΠΌΡ‹ΠΉ простой способ Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

В самом простом случаС для рСализации адаптивности ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ достаточно ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π»ΠΈΠ±ΠΎΒ Ρ‚Π°ΠΊΠΎΠ³ΠΎ ΠΆΠ΅ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΊΠ°ΠΊ ΠΈΒ ΠΌΠ°ΠΊΡΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Ρ€Π°Π·ΠΌΠ΅Ρ€ области, ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ ΠΎΠ½ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Π·Π°Π½ΠΈΠΌΠ°Ρ‚ΡŒ, Ссли Π½Π°ΠΌ адаптация ΠΏΠΎΠ΄Β Retina-дисплСи Π½Π΅Β Π½ΡƒΠΆΠ½Π°; Π»ΠΈΠ±ΠΎΒ Π²Β Π΄Π²Π°-Ρ‚Ρ€ΠΈ Ρ€Π°Π·Π° большС этой области, Ссли Π½ΡƒΠΆΠ½Π° адаптация под экраны с высоким DPI.

Π‘Π°ΠΌΠΈ изобраТСния в этом случаС ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΡŽΡ‚ΡΡ срСдствами CSS в сторону ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ.

НСдостаток Π΄Π°Π½Π½ΠΎΠ³ΠΎ способа β€” это высокий ΠΎΠ±ΡŠΡ‘ΠΌ Ρ‚Ρ€Π°Ρ„ΠΈΠΊΠ°, Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹ΠΉ для загрузки страницы с большим количСством ΠΏΠΎΠ»Π½ΠΎΡ†Π²Π΅Ρ‚Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, изобраТСния ΠΆΠ΅ с нСбольшим количСством Ρ†Π²Π΅Ρ‚ΠΎΠ² ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ достаточно ΠΊΠΎΠΌΠΏΠ°ΠΊΡ‚Π½Ρ‹ Π΄Π°ΠΆΠ΅ в высоком Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ.

РСализация Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с JS-ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΎΠΉ Π½Π°Β Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π΅

ΠŸΡ€ΠΈΒ ΠΏΠΎΠΌΠΎΡ‰ΠΈ JS ΠΌΡ‹ ΠΌΠΎΠΆΠ΅ΠΌ ΡƒΠ·Π½Π°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€ области просмотра ΠΈΒ DPI устройства, Π°Β ΡƒΠΆΠ΅ исходя из этого Π·Π°ΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ с сСрвСра изобраТСния, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ ΡΠΎΠΎΡ‚Π²Π΅Ρ‚ΡΡ‚Π²ΡƒΡŽΡ‚ Π΄Π°Π½Π½Ρ‹ΠΌ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π°ΠΌ. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, устройства с нСбольшими экранами ΠΈ/ΠΈΠ»ΠΈ со стандартным DPI Π½Π΅Β Π±ΡƒΠ΄ΡƒΡ‚ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ΡŒ ΠΈΠ·Π±Ρ‹Ρ‚ΠΎΡ‡Π½ΠΎ большиС Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ: Ρ‚Π°ΠΊ ΠΈΒ Ρ‚Ρ€Π°Ρ„ΠΈΠΊ экономится, и сайт загруТаСтся быстрСС.

РСализовываСтся ΠΌΠ΅Ρ‚ΠΎΠ΄ ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ ΠΏΡ€ΠΈΒ ΠΏΠΎΠΌΠΎΡ‰ΠΈ события JavaScript, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ при инициируСтся ΠΏΡ€ΠΈΒ Π·Π°Π³Ρ€ΡƒΠ·ΠΊΠ΅ страницы ΠΈΒ ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ «подставляСт» Π²Β src-Π°Ρ‚Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ссылку, ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½ΡƒΡŽ из исходной ссылки (ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ Ρ…Ρ€Π°Π½ΠΈΠΌΠΎΠΉ Π²Β data-Π°Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Π΅ Ρ‚Π΅Π³Π° img) ΠΏΡƒΡ‚Π΅ΠΌ добавлСния Π²Β ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ для загрузки Π½ΡƒΠΆΠ½Ρ‹Ρ… Π΄Π°Π½Π½Ρ‹Ρ… об экранС.

Π­Ρ‚ΠΎΡ‚ способ нСсколько ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ ΠΎΠ±ΡŠΡ‘ΠΌ Ρ…Ρ€Π°Π½ΠΈΠΌΡ‹Ρ… вСрсий Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΉ, слоТнСС Π²Β Ρ€Π΅Π°Π»ΠΈΠ·Π°Ρ†ΠΈΠΈ (ΠΊΠ°ΠΊ Π±Π΅ΠΊΠ΅Π½Π΄Π°, Ρ‚Π°ΠΊ ΠΈΒ Ρ„Ρ€ΠΎΠ½Ρ‚Π΅Π½Π΄Π°), Π°Β Ρ‚Π°ΠΊΠΆΠ΅ Ρ‚Ρ€Π΅Π±ΡƒΠ΅Ρ‚ ΠΎΠ±ΡΠ·Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎΠ³ΠΎ наличия JS на сторонС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π°.

Π’Π°ΠΊΠΆΠ΅ Π²Β Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях ΠΊΡ€ΠΎΠΌΠ΅ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ экрана стоит ΡƒΡ‡ΠΈΡ‚Ρ‹Π²Π°Ρ‚ΡŒ Π΅Ρ‰Π΅ ΠΈΒ ΡΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ к сСти ΠΈΠ½Ρ‚Π΅Ρ€Π½Π΅Ρ‚ (Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, нС стоит ΠΏΠ΅Ρ€Π΅Π΄Π°Π²Π°Ρ‚ΡŒ изобраТСния в высоком Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠΈ Π½Π°Β iPhone с Retina-дисплССм, Ссли этот смартфон ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ edge для соСдинСния с интСрнСтом).

РСализация Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Ρ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ с обработкой на бэкСндС

ΠŸΡ€ΠΈΒ ΠΏΠ΅Ρ€Π²ΠΎΠΌ запросС ΠΊΠ»ΠΈΠ΅Π½Ρ‚Π° ΠΌΠΎΠΆΠ½ΠΎ Β«Π·Π°ΠΏΠΎΠΌΠ½ΠΈΡ‚ΡŒΒ» ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Ρ‹ Π΅Π³ΠΎ экрана ΠΈΒ ΠΏΡ€ΠΈΒ Π³Π΅Π½Π΅Ρ€Π°Ρ†ΠΈΠΈ страниц сразу ΠΏΠΎΠ΄ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ Β«ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹Π΅Β» ссылки на изобраТСния. Для инициализации Ρ‚ΡƒΡ‚ Ρ‚ΠΎΠΆΠ΅ часто трСбуСтся JS, хотя для опрСдСлСния устройства ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΒ Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠΈ запроса (свСдСния ΠΎΒ User Agent часто ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‚ ΠΈΠ΄Π΅Π½Ρ‚ΠΈΡ„ΠΈΡ†ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ устройство). РСализация, построСнная Π½Π°Β Π·Π°Π³ΠΎΠ»ΠΎΠ²ΠΊΠ°Ρ… запросов, ΡƒΠΆΠ΅ совсСм нС зависит ΠΎΡ‚Β JS ΠΈΒ ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²Β Π»ΡŽΠ±Ρ‹Ρ… Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ…, хотя в настройкС ΠΎΠ½Π° нСсколько слоТнСС.

Π‘ΠΎΠ²Ρ€Π΅ΠΌΠ΅Π½Π½Ρ‹ΠΉ ΠΈΒ Π½Π°ΠΈΠ±ΠΎΠ»Π΅Π΅ ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½Ρ‹ΠΉ способ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с адаптивными изобраТСниями

ΠžΠΏΠΈΡΠ°Π½Π½Ρ‹Π΅ Π²Ρ‹ΡˆΠ΅ способы ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΠ»ΠΈΡΡŒ (и до сих ΠΏΠΎΡ€ ΠΏΡ€ΠΈΠΌΠ΅Π½ΡΡŽΡ‚ΡΡ) Π²ΠΎΒ ΠΌΠ½ΠΎΠ³ΠΎΠΌ ΠΈΠ·-Π·Π°Β Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΒ Π½ΠΎΡ€ΠΌΠ°Π»ΡŒΠ½ΠΎΠΉ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Π΅ΠΌΠΎΠΉ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρ‹ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Ρ‹ нС прСдоставляли. Π’Π΅ΠΏΠ΅Ρ€ΡŒ всё стало Π·Π½Π°Ρ‡ΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Π»ΡƒΡ‡ΡˆΠ΅. Π’Β HTML5Β ΡƒΒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ появились Π°Ρ‚Ρ‚Ρ€ΠΈΠ±ΡƒΡ‚Ρ‹ srcset ΠΈΒ sizes, ΠΏΠΎΠ·Π²ΠΎΠ»ΡΡŽΡ‰ΠΈΠ΅ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ нСсколько ссылок на изобраТСния, Π°Β Ρ‚Π°ΠΊΠΆΠ΅ появился Ρ‚Π΅Π³ picture, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π΄Π°Π» Π΅Ρ‰Π΅ большС возмоТностСй.

Π­Ρ‚ΠΎΒ Π½Π΅Β Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ Π²Β Internet Explorer 11Β ΠΈΒ Π²Β Π±ΠΎΠ»Π΅Π΅ Ρ€Π°Π½Π½ΠΈΡ… Π΅Π³ΠΎ вСрсиях, но во всСх соврСмСнных Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π°Ρ… ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΊΠ° ΡƒΠΆΠ΅ Π΅ΡΡ‚ΡŒ, поэтому Π΄Π°Π½Π½Ρ‹ΠΉ способ в соврСмСнной Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ΅ являСтся ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡Ρ‚ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΌ.

Π Π°Π±ΠΎΡ‚Π° с Π³Π°Π»Π΅Ρ€Π΅Π΅ΠΉ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS

Поиск

ГалСрСя ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS позволяСт ΡΠΎΠ·Π΄Π°Π²Π°Ρ‚ΡŒ изобраТСния ΠΈ слайд-ΡˆΠΎΡƒ Π½Π° основС чистого CSS с Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΌ ΠΏΠ΅Ρ€Π΅Ρ…ΠΎΠ΄ΠΎΠΌ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ быстрой ΠΈ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΉ Π½Π°Π²ΠΈΠ³Π°Ρ†ΠΈΠ΅ΠΉ. Π˜Ρ‚Π°ΠΊ, с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ Π΄ΠΈΠ·Π°ΠΉΠ½ своСго сайта. ГалСрСя соотвСтствуСт послСдним Π²Π΅Π±-стандартам, Π° это ΠΎΠ·Π½Π°Ρ‡Π°Π΅Ρ‚, Ρ‡Ρ‚ΠΎ изобраТСния всСгда Π±ΡƒΠ΄ΡƒΡ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ, Π΄Π°ΠΆΠ΅ Ссли ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ, заходящиС Π½Π° сайт, Π½Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‚ JavaScript.

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

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

Π’ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… случаях Ρƒ вас Π΅ΡΡ‚ΡŒ ΠΎΠ΄Π½ΠΎ ΠΈΠ»ΠΈ Π΄Π²Π° изобраТСния Π½Π° страницС ΠΈ, Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Π΅Ρ‰Π΅ ΠΎΠ΄Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ для Ρ„ΠΎΠ½Π°, Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ ΠΏΡ€Π΅Π΄ΡΡ‚Π°Π²Π»ΡΡŽΡ‚ собой Π½Π΅ΠΎΡ‚ΡŠΠ΅ΠΌΠ»Π΅ΠΌΡƒΡŽ Ρ‡Π°ΡΡ‚ΡŒ Π²Π΅Π±-Π΄ΠΈΠ·Π°ΠΉΠ½Π°. Π•ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ случаи, ΠΊΠΎΠ³Π΄Π° Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ сайт с большим количСством ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ ΠΈ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ Π³Π°Π»Π΅Ρ€Π΅ΡŽ. CSS-ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ β€” Π»ΡƒΡ‡ΡˆΠ΅Π΅ Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎΠ³ΠΎ Π²ΠΈΠ΄Π° сайта с ΠΏΠΎΠ»Π½ΠΎΡ€Π°Π·ΠΌΠ΅Ρ€Π½Ρ‹ΠΌΠΈ изобраТСниями.

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

Π’ ΠΊΠΎΠ½Ρ†Π΅ ΠΌΡ‹ вмСстС ΠΈΠ·ΡƒΡ‡ΠΈΠΌ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΡ‹ CSS-Π³Π°Π»Π΅Ρ€Π΅ΠΈ. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ:

ΠŸΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π½ΠΈΠΆΠ΅ ΠΏΡ€ΠΈΠΌΠ΅Ρ€, содСрТащий Π³Π°Π»Π΅Ρ€Π΅ΡŽ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ, создан с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ CSS. Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ:

 
<Π³ΠΎΠ»ΠΎΠ²Π°>
<ΡΡ‚ΠΈΠ»ΡŒ>
div.img {
    ΠΏΠΎΠ»Π΅: 5px;
    Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px сплошной сСрый;
    ΠΏΠ»Ρ‹Ρ‚ΡŒ Π½Π°Π»Π΅Π²ΠΎ;
    ΡˆΠΈΡ€ΠΈΠ½Π°: 180 пиксСлСй;
}
div.img:Π½Π°Π²Π΅Π΄ΠΈΡ‚Π΅ {
    Π³Ρ€Π°Π½ΠΈΡ†Π°: 1px сплошной Ρ‡Π΅Ρ€Π½Ρ‹ΠΉ;
}
div.img img {
    ΡˆΠΈΡ€ΠΈΠ½Π°: 100%;
    высота: Π°Π²Ρ‚ΠΎ;
}
div.desc {
    отступ: 10 пиксСлСй;
    Π²Ρ‹Ρ€Π°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ тСкста: Π²ΠΏΡ€Π°Π²ΠΎ;
}
<Ρ‚Π΅Π»ΠΎ> <Π΄Π΅Π»>
ЛСдяной Ρ…ΠΎΠ»ΠΎΠ΄
Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ любоС описаниС изобраТСния прямо здСсь
<Π΄Π΅Π»> jpg"> Π₯ΠΎΠ»ΠΎΠ΄Π½Ρ‹Π΅ Π³ΠΎΡ€Ρ‹
Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ любоС описаниС изобраТСния прямо здСсь
<Π΄Π΅Π»>
ОсСнниС огни
Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ любоС описаниС изобраТСния прямо здСсь
<Π΄Π΅Π»> org/wp-content/uploads/2018/10/master-of-landscape-architecture-fresh-master-of-landscape-architecture-new-in-2018-of-master -of-landscape-architecture.jpg" alt="ΠšΡ€Π°ΡΠΈΠ²Ρ‹ΠΉ ΠΏΠ΅ΠΉΠ·Π°ΠΆ">
Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ любоС описаниС изобраТСния прямо здСсь