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 Ρ
ΠΎΡΠΎΡΠΎ ΠΏΠΎΠ΄Ρ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΡΡΠ°ΡΠΈΡΠ½ΠΎΠ³ΠΎ ΠΊΠΎΠ½ΡΠ΅Π½ΡΠ°, Π½ΠΎ ΠΊΠΎΠ³Π΄Π° Π΄Π΅Π»ΠΎ Π΄ΠΎΡ
ΠΎΠ΄ΠΈΡ Π΄Π»Ρ Π²ΡΠ²ΠΎΠ΄Π° Π΄ΠΈΠ½Π°ΠΌΠΈΠΊΠΈ ΡΠ΄ΠΎΠ±Π½Π΅Π΅ Π²ΡΠ²ΠΎΠ΄ΠΈΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΎΠ½ΠΎΠ²ΠΎΠ³ΠΎ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ. Π ΠΊΠ°ΡΠ΅ΡΡΠ²Π΅ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ° ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ Π»ΡΠ±ΠΎΠΉ ΡΠ»Π΅ΠΌΠ΅Π½Ρ Π²ΡΠΎΠ΄Π΅
ΠΡΠΈΠΌΠ΅Ρ:
.example_image_1 {
width: 300px;
height: 200px;
background: url(/media/blog/example_image_1.jpg) center no-repeat;
}
Β
Π‘Π²ΠΎΠΉΡΡΠ²ΠΎ center Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π΅Ρ ΡΠΎΠ½ ΠΏΠΎ Π³ΠΎΡΠΈΠ·ΠΎΠ½ΡΠ°Π»ΠΈ ΠΈ ΠΏΠΎ Π²Π΅ΡΡΠΈΠΊΠ°Π»ΠΈ, Π° no-repeat Π·Π°ΠΏΡΠ΅ΡΠ°Π΅Ρ ΠΏΠΎΠ²ΡΠΎΡΠ΅Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ.
ΠΠΎ Π·Π°ΡΠ°ΡΡΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠ΅ ΠΎΡΠ»ΠΈΡΠ°Π΅ΡΡΡ ΠΏΠΎ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈ ΠΏΡΠΎΠΏΠΎΡΡΠΈΡΠΌ ΠΎΡ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠ°, Π° Π΅Π³ΠΎ Π½Π΅ΠΎΠ±Ρ
ΠΎΠ΄ΠΈΠΌΠΎ ΡΠ°ΡΡΡΠ½ΡΡΡ ΠΏΠΎ Π²ΡΠ΅ΠΉ Π΅Π³ΠΎ ΠΏΠ»ΠΎΡΠ°Π΄ΠΈ.
ΠΡΠΈΠΌΠ΅Ρ:
Β
Π‘ΠΎ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎΠΌ 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, ΡΡΠΎΠ±Ρ ΠΏΡΠΎΡΠ΅ΡΡΠΈΠΎΠ½Π°Π»ΡΠ½ΠΎ Π²Π·Π³Π»ΡΠ½ΡΡΡ Π½Π° ΡΠ°ΠΉΡ Ρ Π½Π΅ΡΠΊΠΎΠ»ΡΠΊΠΈΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ; Π½Π°ΡΡΠ΄Ρ Ρ HTML, CSS β ΠΎΡΠ»ΠΈΡΠ½ΡΠΉ ΠΈΠ½ΡΡΡΡΠΌΠ΅Π½Ρ Π΄Π»Ρ ΡΠΎΠ·Π΄Π°Π½ΠΈΡ Π³Π°Π»Π΅ΡΠ΅ΠΈ Π²Π΅Π±-ΡΠ°ΠΉΡΠΎΠ²; ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΡΠ΄Π΅Π»Π°ΡΡ ΡΡΠΎ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ Π½Π°ΡΠΈ ΠΎΡΠ½ΠΎΠ²Π½ΡΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° CSS; ΠΌΠΎΠΆΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΠΏΡΠΎΡΡΡΡ Π³Π°Π»Π΅ΡΠ΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΡΠΈΡΠΈΠ½Ρ ΠΈ Π²ΡΡΠΎΡΡ, Π³ΡΠ°Π½ΠΈΡΡ CSS, ΠΎΡΡΡΡΠΏΡ, ΠΏΠ»Π°Π²Π°ΡΡΠΈΠ΅ ΡΠ²ΠΎΠΉΡΡΠ²Π° ΠΈ ΡΠ²ΠΎΠΉΡΡΠ²Π° Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΡ ΡΠ΅ΠΊΡΡΠ°, ΠΏΠΎΠ»Ρ
- Π‘ΠΎΠ·Π΄Π°Π½ΠΈΠ΅ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ CSS : Π΄Π»Ρ ΡΠΎΡΠΌΠΈΡΠΎΠ²Π°Π½ΠΈΡ Π³Π°Π»Π΅ΡΠ΅ΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ Π½Π°Ρ Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ, ΠΊ ΠΊΠΎΡΠΎΡΡΠΌ ΠΌΡ ΠΌΠΎΠΆΠ΅ΠΌ ΠΏΡΠΈΠΌΠ΅Π½ΠΈΡΡ ΡΡΠΈΠ»Ρ ΠΈ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ HTML:<Π΄Π΅Π»> jpg">
,, ; ΠΏΠΎΡΠ»Π΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½ΠΈΡ ΠΏΠΎΠ»Ρ, ΠΊΠΎΡΠΎΡΠΎΠ΅ ΠΏΡΠ΅Π΄ΠΎΡΡΠ°Π²Π»ΡΠ΅Ρ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΠΏΠΎΠ»ΡΠΌΠΈ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ, ΠΊΡΠ°ΠΉ, ΠΊΠΎΡΠΎΡΡΠΉ ΠΎΠΊΡΡΠΆΠ°Π΅Ρ ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ; float, ΠΎΠΏΡΠ΅Π΄Π΅Π»ΡΡΡΠΈΠΉ Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ»Π΅ΠΌΠ΅Π½ΡΠΎΠ² ΠΈ ΡΠΈΡΠΈΠ½Ρ Π±Π»ΠΎΠΊΠΎΠ²-ΠΊΠΎΠ½ΡΠ΅ΠΉΠ½Π΅ΡΠΎΠ²; Π·Π°ΡΠ΅ΠΌ ΠΌΡ ΠΎΠΏΠΈΡΡΠ²Π°Π΅ΠΌ ΡΠ°Π·ΠΌΠ΅ΡΡ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ Ρ ΠΏΠΎΠΌΠΎΡΡΡ ΡΠΈΡΠΈΠ½Ρ; Π·Π°ΡΠ΅ΠΌ ΠΌΡ ΡΠΎΠ·Π΄Π°Π΅ΠΌ ΡΠ΅ΠΊΡΡΠΎΠ²ΠΎΠ΅ ΠΏΠΎΠ»Π΅ Π΄Π»Ρ Π½Π°ΡΠΈΡ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠΉ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΡ ΠΎΡΡΡΡΠΏΡ, ΠΎΡΡΠ°Π²Π»ΡΡ ΠΏΡΠΎΡΡΡΠ°Π½ΡΡΠ²ΠΎ ΠΌΠ΅ΠΆΠ΄Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡΠΌΠΈ ΠΈ ΡΠ΅ΠΊΡΡΠΎΠΌ ΠΈ Π½Π°Π·Π½Π°ΡΠ°Ρ ΡΠ²ΠΎΠΉΡΡΠ²ΠΎ ΡΡΠΈΠ»Ρ text-align.
ΠΡΠΈΠ²Π΅Π΄Π΅Π½Π½ΡΠΉ Π½ΠΈΠΆΠ΅ ΠΏΡΠΈΠΌΠ΅Ρ, ΡΠΎΠ΄Π΅ΡΠΆΠ°ΡΠΈΠΉ Π³Π°Π»Π΅ΡΠ΅Ρ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΠΉ, ΡΠΎΠ·Π΄Π°Π½ Ρ ΠΏΠΎΠΌΠΎΡΡΡ CSS. Π‘Π»Π΅Π΄ΠΎΠ²Π°ΡΠ΅Π»ΡΠ½ΠΎ:
<Π³ΠΎΠ»ΠΎΠ²Π°> <ΡΡΠΈΠ»Ρ> div.img { ΠΏΠΎΠ»Π΅: 5px; Π³ΡΠ°Π½ΠΈΡΠ°: 1px ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΡΠΉ; ΠΏΠ»ΡΡΡ Π½Π°Π»Π΅Π²ΠΎ; ΡΠΈΡΠΈΠ½Π°: 180 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; } div.img:Π½Π°Π²Π΅Π΄ΠΈΡΠ΅ { Π³ΡΠ°Π½ΠΈΡΠ°: 1px ΡΠΏΠ»ΠΎΡΠ½ΠΎΠΉ ΡΠ΅ΡΠ½ΡΠΉ; } div.img img { ΡΠΈΡΠΈΠ½Π°: 100%; Π²ΡΡΠΎΡΠ°: Π°Π²ΡΠΎ; } div.desc { ΠΎΡΡΡΡΠΏ: 10 ΠΏΠΈΠΊΡΠ΅Π»Π΅ΠΉ; Π²ΡΡΠ°Π²Π½ΠΈΠ²Π°Π½ΠΈΠ΅ ΡΠ΅ΠΊΡΡΠ°: Π²ΠΏΡΠ°Π²ΠΎ; } ΡΡΠΈΠ»Ρ> Π³ΠΎΠ»ΠΎΠ²Π°> <ΡΠ΅Π»ΠΎ> <Π΄Π΅Π»>
ΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΡΠΌΠΎ Π·Π΄Π΅ΡΡΠΡ ΠΌΠΎΠΆΠ΅ΡΠ΅ Π΄ΠΎΠ±Π°Π²ΠΈΡΡ Π»ΡΠ±ΠΎΠ΅ ΠΎΠΏΠΈΡΠ°Π½ΠΈΠ΅ ΠΈΠ·ΠΎΠ±ΡΠ°ΠΆΠ΅Π½ΠΈΡ ΠΏΡΡΠΌΠΎ Π·Π΄Π΅ΡΡ
