Π Π°Π·Π½ΠΎΠ΅

Css ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ изобраТСния: html — ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ с сохранСниСм ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΉ

28.06.1987

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

Как ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π± ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² css

Как ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ β€” ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ изобраТСния

ΠšΠΎΠ½Ρ‚Π΅ΠΉΠ½Π΅Ρ€ Π΄ΠΎΠ»ΠΆΠ΅Π½ ΠΈΠΌΠ΅Ρ‚ΡŒ «ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎΠ΅» ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅.

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

.img-zoom-container <
position: relative;
>

.img-zoom-lens <
position: absolute;
border: 1px solid #d4d4d4;
/*set the size of the lens:*/
width: 40px;
height: 40px;
>

.img-zoom-result <
border: 1px solid #d4d4d4;
/*set the size of the result div:*/
width: 300px;
height: 300px;
>

Как ΡƒΠΌΠ΅Π½ΡŒΡˆΠΈΡ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π± ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² css

ВсС сайты, ΠΏΠΎ ΠΌΠ°ΠΊΠ΅Ρ‚Ρƒ вёрстки, ΠΌΠΎΠΆΠ½ΠΎ Ρ€Π°Π·Π΄Π΅Π»ΠΈΡ‚ΡŒ Π½Π° Ρ‚Ρ€ΠΈ ΠΏΡ€ΠΈΠ½Ρ†ΠΈΠΏΠΈΠ°Π»ΡŒΠ½Ρ‹Π΅ Π³Ρ€ΡƒΠΏΠΏΡ‹: ТСстко фиксированныС (Rigid fixed), Π°Π΄Π°ΠΏΡ‚ΠΈΠ²Π½Ρ‹Π΅ Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹Π΅ (Adaptable fluid) ΠΈ Ρ€Π°ΡΡˆΠΈΡ€ΡΠ΅ΠΌΡ‹Π΅ эластичныС (Expandable elastic) ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹.

Π’ Π΄Π°Π½Π½ΠΎΠΉ Ρ‚Π΅ΠΌΠ΅, рассмотрим Π²Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ подстройки элСмСнтов Π΄ΠΈΠ·Π°ΠΉΠ½Π° шапки, Π° ΠΈΠΌΠ΅Π½Π½ΠΎ β€” ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ, ΠΏΠΎΠ΄ Ρ€Π΅Π·ΠΈΠ½ΠΎΠ²Ρ‹Π΅ ΠΌΠ°ΠΊΠ΅Ρ‚Ρ‹ сайтов.

ДСлаСтся это, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ, трСмя основными способами:
* Вёрсткой шапки, с использованиСм Π½Π΅ фиксированных областСй с Ρ„ΠΎΠ½ΠΎΠΌ.
* ИзмСнСниС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния β€” Ρ€Π°Π·Π½Ρ‹ΠΌΠΈ способами.
* ИзмСнСниС всСго Π²ΠΈΠ΄Π° элСмСнтов ΠΌΠ΅Ρ‚ΠΎΠ΄ΠΎΠΌ динамичСского добавлСния/измСнСния стилСй.

Вёрсткой шапки, с использованиСм Π½Π΅ фиксированных областСй с Ρ„ΠΎΠ½ΠΎΠΌ.

НаиболСС распространённой ΠΈ кроссбраузСрной, являСтся конструкция Π²ΠΈΠ΄Π°:

.
Π’ ΠΏΠΎΠ΄ΠΎΠ±Π½ΠΎΠΌ исполнСнии, всё просто β€” рисуСтся шапка, Π² ΠΊΠ°ΠΊΠΎΠΌ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ графичСском Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΎΡ€Π΅, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€ Π² Ρ„ΠΎΡ‚ΠΎΡˆΠΎΠΏΠ΅ ΠΈΠ»ΠΈ ΠΊΠΎΡ€Π΅Π»Π΅, нарСзаСтся Π½Π° ΠΎΡ‚Π΄Π΅Π»ΡŒΠ½Ρ‹Π΅ графичСскиС элСмСнты (Ρ„Ρ€Π°Π³ΠΌΠ΅Π½Ρ‚Ρ‹):

ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° β€” слСва:

ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° β€” справа:

ΠΈ Ρ„ΠΎΠ½ β€” ΠΏΠΎ Ρ†Π΅Π½Ρ‚Ρ€Ρƒ.

.
Для Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π² Π΄Π°Π½Π½ΠΎΠΌ случаС, прописываСтся Ρ„ΠΎΠ½, Π° ΡˆΠΈΡ€ΠΈΠ½Π° указываСтся Π² ΠΏΡ€ΠΎΡ†Π΅Π½Ρ‚Π°Ρ… β€” ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ 100%.
Π¨ΠΈΡ€ΠΈΠ½Π° ячССк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹, Π² ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Ρ… Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒΡΡ графичСскиС элСмСнты, ΠΎΠ±Ρ‹Ρ‡Π½ΠΎ прописываСтся Π² пиксСлах, Π½ΠΎ, ΠΊΠ°ΠΊ ΠΌΠΈΠ½ΠΈΠΌΡƒΠΌ, ΠΎΠ΄Π½Π° ΠΈΠ· ячССк Ρ‚Π°Π±Π»ΠΈΡ†Ρ‹ Π΄ΠΎΠ»ΠΆΠ½Π° ΠΈΠΌΠ΅Ρ‚ΡŒ ΡΠ²ΠΎΠ±ΠΎΠ΄Π½ΡƒΡŽ ΡˆΠΈΡ€ΠΈΠ½Ρƒ (auto).
Π’ΠΎ Π΅ΡΡ‚ΡŒ Ссли ячССк Π΄Π²Π΅, ΠΊΠ°ΠΊ Π² Π΄Π°Π½Π½ΠΎΠΌ случаС, ΠΎΠ΄Π½ΠΎΠΉ прописываСтся фиксированный Ρ€Π°Π·ΠΌΠ΅Ρ€, Ρ€Π°Π²Π½Ρ‹ΠΉ ΡˆΠΈΡ€ΠΈΠ½Π΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ, Π²Ρ‚ΠΎΡ€ΠΎΠΉ устанавливаСтся Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«autoΒ» β€” Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ Π½Π° всю ΠΎΡΡ‚Π°Π²ΡˆΡƒΡŽΡΡ ΡˆΠΈΡ€ΠΈΠ½Ρƒ.

Π‘Π°ΠΌΠΈ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ ΠΌΠΎΠ³ΡƒΡ‚ вставятся Π² ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½Π½Ρ‹Π΅ для Π½ΠΈΡ… ячСйки, ΠΊΠ°ΠΊ просто ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΎΠΉ (Ρ‚Π΅Π³ΠΎΠΌ <img />), Ρ‚Π°ΠΊ ΠΈ Ρ„ΠΎΠ½ΠΎΠΌ.
Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС, ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ вставлСны Ρ„ΠΎΠ½ΠΎΠΌ, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ лСвая ячСйка ΡƒΠΆΠ΅ содСрТит тСкстовый Π±Π»ΠΎΠΊ β€” ΠΊΠΎΠΏΠΈΡ€Π°ΠΉΡ‚, Π° правая ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅Ρ‚ Π΅Π³ΠΎ Π½Π°Π»ΠΈΡ‡ΠΈΠ΅.

Π—Π΄Π΅ΡΡŒ всС просто β€” смотрим ΠΏΡ€ΠΈΠΌΠ΅Ρ€:

Но, Π½Π΅ ΠΊΠ°ΠΆΠ΄ΡƒΡŽ ΡˆΠ°ΠΏΠΊΡƒ ΠΌΠΎΠΆΠ½ΠΎ Π½Π°Ρ€Π΅Π·Π°Ρ‚ΡŒ ΠΏΠΎΠ΄ΠΎΠ±Π½Ρ‹ΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, ΠΈ Π²ΠΎΡ‚ здСсь Π½Π°Ρ‡ΠΈΠ½Π°ΡŽΡ‚ Π²ΠΎΠ·Π½ΠΈΠΊΠ°Ρ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ слоТности.
Π’Π°Ρ€ΠΈΠ°Π½Ρ‚Ρ‹ ΠΈΡ… Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ рассмотрим Π΄Π°Π»Π΅Π΅ .

ИзмСнСниС ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠ² ΠΏΠΎΠ·ΠΈΡ†ΠΈΠΎΠ½ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ³ΠΎ изобраТСния

ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ΠΌ ΠΎΡ‚Π½ΠΎΡΠΈΡ‚Π΅Π»ΡŒΠ½ΠΎ Ρ€ΠΎΠ΄ΠΈΡ‚Π΅Π»ΡŒΡΠΊΠΎΠ³ΠΎ элСмСнта.

Π’ Π΄Π°Π½Π½ΠΎΠΌ случаС β€” Ρ‚Π°Π±Π»ΠΈΡ†Π°.

Π‘Ρ€Π°Π·Ρƒ Ρ…ΠΎΡ‡Ρƒ ΠΎΡ‚ΠΌΠ΅Ρ‚ΠΈΡ‚ΡŒ, Ρ‡Ρ‚ΠΎ Ρƒ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° Internet Explorer нСбольшиС ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹ с ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠ΅ΠΌ Ρ€Π°Π·ΠΌΠ΅Ρ€ΠΎΠ² ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Π° β€” Π² Π΄Π°Π½Π½ΠΎΠΌ случаС β€” ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ.
Π‘ΡƒΡ‚ΡŒ Π΅Π³ΠΎ Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅ΠΌ:
Если Ρƒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ΅ Ρ€Π΅Π°Π»ΡŒΠ½Π°Ρ ΡˆΠΈΡ€ΠΈΠ½Π° Ρ€Π°Π²Π½Π°, допустим 1024px, ΠΈ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΡˆΠΈΡ€ΠΈΠ½Ρ‹ ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° это ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Ρ€Π°ΡΡ‚ΡΠ³ΠΈΠ²Π°Π»ΠΈΡΡŒ/ΡΡƒΠΆΠ°Π»ΠΈΡΡŒ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ, Ρ‚ΠΎ ΠΏΡ€ΠΈ суТСнии ΠΎΠΊΠ½Π° Π±Ρ€Π°ΡƒΠ·Π΅Ρ€Π° ΡˆΠΈΡ€ΠΈΠ½Π° изобраТСния Π² ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½Ρ‹ΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ‚ β€œΠ·Π°ΡΡ‚Ρ€Π΅Π²Π°Π΅Ρ‚β€ ΠΈ Π½Π΅ ΡΡƒΠΆΠ°ΡŽΡ‚ΡΡ дальшС. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Ρ‡Π΅Π³ΠΎ ΠΎΠ½ΠΎ Π²Ρ‹Ρ…ΠΎΠ΄ΠΈΡ‚ Π·Π° ΠΏΡ€Π΅Π΄Π΅Π»Ρ‹ ΠΏΡ€Π΅Π΄ΠΏΠΎΠ»Π°Π³Π°Π΅ΠΌΠΎΠ³ΠΎ ΠΊΠΎΠ½Ρ‚Π΅Π½Ρ‚Π°.
Π’ΠΎ бишь, изобраТСния Π½Π΅ ΡΡƒΠΆΠ°ΡŽΡ‚ΡΡ мСньшС ΠΈΡ… фактичСского Ρ€Π°Π·ΠΌΠ΅Ρ€Π°.

ΠžΠ±Ρ…ΠΎΠ΄ΠΈΡ‚ΡΡ этот Β«Π±Π°Π³Β» достаточно просто ΠΈ Π·Π°ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ΡΡ всСго Π² ΠΎΠ΄Π½ΠΎΠΉ строчкС CSS-ΠΊΠΎΠ΄Π° β€” Π² свойствС Β«table-layout: fixedΒ», ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π½ΡƒΠΆΠ½ΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΊ Ρ‚Π°Π±Π»ΠΈΡ†Π΅, Π² ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π·Π°ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅.

Π‘Π»Π΅Π΄ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½ΠΎ, Ссли Ρƒ вас ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠ° шапки Π·Π°Π²Π΅Π΄ΠΎΠΌΠΎ большС, минимальной ΡˆΠΈΡ€ΠΈΠ½Ρ‹ сайта, Π½ΡƒΠΆΠ½ΠΎ Π·Π°Π΄Π°Ρ‚ΡŒ Ρ‚Π°Π±Π»ΠΈΡ†Π΅ этот ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€.
Задаётся ΠΎΠ½ Ρ‡Π΅Ρ€Π΅Π· стили (CSS) ΠΈ ΠΈΠΌΠ΅Π΅Ρ‚ всСго Π΄Π²Π° Π°Ρ€Π³ΡƒΠΌΠ΅Π½Ρ‚Π°: Β«autoΒ» ΠΈ Β«fixedΒ».

ΠšΡ€ΠΎΠΌΠ΅ Ρ‚ΠΎΠ³ΠΎ:
Если Ρƒ изобраТСния Π½Π΅ ΡƒΠΊΠ°Π·Π°Π½Π° высота, ΠΈΠ»ΠΈ ΡƒΠΊΠ°Π·Π°Π½ΠΎ Π·Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ Β«autoΒ» β€” ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ (сохраняя ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон).
Если ΠΆΠ΅ высота ΡƒΠΊΠ°Π·Π°Π½Π° ΠΊΠΎΠ½ΠΊΡ€Π΅Ρ‚Π½ΠΎ (Π² Π»ΡŽΠ±Ρ‹Ρ… ΠΏΠΎΠ»ΠΎΠΆΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Ρ… Π΅Π΄ΠΈΠ½ΠΈΡ†Π°Ρ… измСрСния), Ρ‚ΠΎ ΡΠΎΠΎΡ‚Π½ΠΎΡˆΠ΅Π½ΠΈΠ΅ сторон Π½Π°Ρ€ΡƒΡˆΠ°Π΅Ρ‚ΡΡ ΠΈ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² ΡˆΠΈΡ€ΠΈΠ½Ρƒ, сохраняя Π·Π°Π΄Π°Π½Π½ΡƒΡŽ Π² высоту.

CSS-стили (ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎ)

ΠΠ²Ρ‚ΠΎΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΎΠΊ ΠΏΠΎ ΡˆΠΈΡ€ΠΈΠ½Π΅ родитСля

Π•ΡΡ‚ΡŒ ΠΆΠ΅Π»Π°Π½ΠΈΠ΅ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Ρ‚ΡŒ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ Ρ„ΠΎΡ‚ΠΎ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ΠΎΠΌ Π² зависимости ΠΎΡ‚ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΡ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ.
Допустим Π²Ρ‹Π²ΠΎΠ΄ΠΈΠΌ Π½Π° страницС Ρ„ΠΎΡ‚ΠΎ ΡˆΠΈΡ€ΠΈΠ½ΠΎΠΉ 1024px, ΠΈ Π΄Π°Π±Ρ‹ Π½Π΅ Π·Π°ΡΡ‚Π°Π²Π»ΡΡ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Ρ с мСньшим Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Π°Ρ‚Π°Π»ΡŒΠ½Ρ‹ΠΌ скроллингом, примСняСм ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠΉ ΠΏΡ€ΠΈΠ΅ΠΌ:
ставим Π½ΡƒΠΆΠ½Ρ‹ΠΌ img ΡΡ‚ΠΈΠ»ΡŒ max-width:100%; height:auto.

Но с этой Π·Π°Π΄Π°Ρ‡Π΅ΠΉ Π½Π΅ справляСтся IE8, Ссли Π² Ρ‚Π΅Π³Π΅ img Π·Π°Π΄Π°Π½Ρ‹ width ΠΈ height.

IE8 вмСсто ΠΏΡ€ΠΎΠΏΠΎΡ€Ρ†ΠΈΠΎΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΈΡ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ сТимаСт Π΅Π΅ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ ΠΏΠΎ Π³ΠΎΡ€ΠΈΠ·ΠΎΠ½Ρ‚Π°Π»ΠΈ. Если ΡˆΠΈΡ€ΠΈΠ½Ρƒ ΠΈ высоту img Π½Π΅ Π·Π°Π΄Π°Π²Π°Ρ‚ΡŒ Ρ‚ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ становится ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½Ρ‹ΠΌ.

Π•ΡΡ‚ΡŒ Π»ΠΈ способ Π·Π°Π΄Π°Ρ‚ΡŒ стили, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π·Π°ΡΡ‚Π°Π²ΠΈΡ‚ΡŒ IE8 ΠΊΠΎΡ€Ρ€Π΅ΠΊΡ‚Π½ΠΎ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΡƒ ΠΏΡ€ΠΈ Π·Π°Π΄Π°Π½Ρ‹Ρ… width ΠΈ height для стиля max-width:100%?

rendering — Бвойство image-rendering CSS Π·Π°Π΄Π°Π΅Ρ‚ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ изобраТСния.

Бвойство CSS для image-rendering устанавливаСт Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ изобраТСния. Бвойство примСняСтся ΠΊ самому элСмСнту, ΠΊ Π»ΡŽΠ±Ρ‹ΠΌ изобраТСниям, установлСнным Π² Π΄Ρ€ΡƒΠ³ΠΈΡ… Π΅Π³ΠΎ свойствах, ΠΈ ΠΊ Π΅Π³ΠΎ ΠΏΠΎΡ‚ΠΎΠΌΠΊΠ°ΠΌ.

Try it

ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ Π°Π³Π΅Π½Ρ‚ Π±ΡƒΠ΄Π΅Ρ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΠ³Π΄Π° Π°Π²Ρ‚ΠΎΡ€ страницы ΡƒΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹, ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹Π΅ ΠΎΡ‚ Π΅Π³ΠΎ СстСствСнного Ρ€Π°Π·ΠΌΠ΅Ρ€Π°. ΠœΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€ΠΎΠΈΡΡ…ΠΎΠ΄ΠΈΡ‚ΡŒ ΠΈΠ·-Π·Π° взаимодСйствия с ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΌ (ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅). НапримСр, Ссли СстСствСнный Ρ€Π°Π·ΠΌΠ΅Ρ€ изобраТСния составляСт 100Γ—100px , Π½ΠΎ Π΅Π³ΠΎ фактичСскиС Ρ€Π°Π·ΠΌΠ΅Ρ€Ρ‹ ΡΠΎΡΡ‚Π°Π²Π»ΡΡŽΡ‚ 200Γ—200px (ΠΈΠ»ΠΈ 50Γ—50px ), Ρ‚ΠΎ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΡƒΠ²Π΅Π»ΠΈΡ‡Π΅Π½ΠΎ (ΠΈΠ»ΠΈ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ΅Π½ΠΎ) с использованиСм Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ°, Π·Π°Π΄Π°Π½Π½ΠΎΠ³ΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€ΠΎΠΌ image-rendering . Π­Ρ‚ΠΎ свойство Π½Π΅ влияСт Π½Π° Π½Π΅ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½Π½Ρ‹Π΅ изобраТСния.

Syntax

/ * ЗначСния ΠΊΠ»ΡŽΡ‡Π΅Π²Ρ‹Ρ… слов * /
image-rendering: auto;
image-rendering: crisp-edges;
image-rendering: pixelated;
/ * Π“Π»ΠΎΠ±Π°Π»ΡŒΠ½Ρ‹Π΅ значСния * /
image-rendering: inherit;
image-rendering: initial;
image-rendering: revert;
image-rendering: revert-layer;
image-rendering: unset;

Values

auto

Алгоритм ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ зависит ΠΎΡ‚ UA. Начиная с вСрсии 1.9 (Firefox 3.0), Gecko ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ Π±ΠΈΠ»ΠΈΠ½Π΅ΠΉΠ½ΡƒΡŽ ΠΏΠ΅Ρ€Π΅Π΄ΠΈΡΠΊΡ€Π΅Ρ‚ΠΈΠ·Π°Ρ†ΠΈΡŽ (высокоС качСство).

smooth Experimental

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ Π΄ΠΎΠ»ΠΆΠ½ΠΎ Π±Ρ‹Ρ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΎ ΠΏΠΎ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΡƒ,ΠΌΠ°ΠΊΡΠΈΠΌΠΈΠ·ΠΈΡ€ΡƒΡŽΡ‰Π΅ΠΌΡƒ Π΅Π³ΠΎ внСшний Π²ΠΈΠ΄. Π’ частности,допустимы Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΡ‹ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ с «ΡΠ³Π»Π°ΠΆΠ΅Π½Π½Ρ‹ΠΌΠΈ» Ρ†Π²Π΅Ρ‚Π°ΠΌΠΈ,Ρ‚Π°ΠΊΠΈΠ΅ ΠΊΠ°ΠΊ билинСйная интСрполяция.Π­Ρ‚ΠΎ ΠΏΡ€Π΅Π΄Π½Π°Π·Π½Π°Ρ‡Π΅Π½ΠΎ для Ρ‚Π°ΠΊΠΈΡ… ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ,ΠΊΠ°ΠΊ Ρ„ΠΎΡ‚ΠΎΠ³Ρ€Π°Ρ„ΠΈΠΈ.

high-quality Experimental

Π˜Π΄Π΅Π½Ρ‚ΠΈΡ‡Π½ΠΎ

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

crisp-edges

Π˜Π·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ° Π±Π»ΠΈΠΆΠ°ΠΉΡˆΠΈΡ… сосСдСй.

pixelated

Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌ блиТайшСго сосСда, ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅Ρ‚ΡΡ Π΄ΠΎ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π³ΠΎ Ρ†Π΅Π»ΠΎΠ³ΠΎ числа, ΠΊΡ€Π°Ρ‚Π½ΠΎΠ³ΠΎ Π΅Π³ΠΎ исходному Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ ΠΈΠ»ΠΈ Ρ€Π°Π²Π½ΠΎΠ³ΠΎ Π΅ΠΌΡƒ, Π° Π·Π°Ρ‚Π΅ΠΌ ΡƒΠΌΠ΅Π½ΡŒΡˆΠ°Π΅Ρ‚ΡΡ Π΄ΠΎ Ρ†Π΅Π»Π΅Π²ΠΎΠ³ΠΎ Ρ€Π°Π·ΠΌΠ΅Ρ€Π°, ΠΊΠ°ΠΊ для smooth . ΠŸΡ€ΠΈ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠΈ Π΄ΠΎ Ρ†Π΅Π»ΠΎΠ³ΠΎ числа, ΠΊΡ€Π°Ρ‚Π½ΠΎΠ³ΠΎ исходному Ρ€Π°Π·ΠΌΠ΅Ρ€Ρƒ, это Π±ΡƒΠ΄Π΅Ρ‚ ΠΈΠΌΠ΅Ρ‚ΡŒ Ρ‚ΠΎΡ‚ ΠΆΠ΅ эффСкт, Ρ‡Ρ‚ΠΎ ΠΈ

crisp-edges .

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅ . ЗначСния optimizeQuality ΠΈ optimizeSpeed , ΠΏΡ€ΠΈΡΡƒΡ‚ΡΡ‚Π²ΡƒΡŽΡ‰ΠΈΠ΅ Π² Ρ€Π°Π½Π½Π΅ΠΌ Ρ‡Π΅Ρ€Π½ΠΎΠ²ΠΈΠΊΠ΅ (ΠΈ ΠΏΠΎΠ»ΡƒΡ‡Π΅Π½Π½Ρ‹Π΅ ΠΈΠ· Π΅Π³ΠΎ эквивалСнта image-rendering SVG ), ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Ρ‹ ΠΊΠ°ΠΊ синонимы для Π·Π½Π°Ρ‡Π΅Π½ΠΈΠΉ smooth ΠΈ pixelated соотвСтствСнно.

Formal definition

Initial valueauto
Applies toall elements
Inheritedyes
Computed valueas specified
Animation typediscrete

Formal syntax

auto | crisp-edges | pixelated

Examples

Настройка Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠΎΠ² ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ

На ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ ΠΏΡ€Π°Π²ΠΈΠ»Π° pixelated ΠΈ crisp-edges ΠΌΠΎΠΆΠ½ΠΎ ΠΊΠΎΠΌΠ±ΠΈΠ½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ Π½Π΅ΠΊΠΎΡ‚ΠΎΡ€ΡƒΡŽ Π°Π»ΡŒΡ‚Π΅Ρ€Π½Π°Ρ‚ΠΈΠ²Ρƒ Π΄Ρ€ΡƒΠ³ Π΄Ρ€ΡƒΠ³Ρƒ. (ΠŸΡ€ΠΎΡΡ‚ΠΎ Π΄ΠΎΠ±Π°Π²ΡŒΡ‚Π΅ фактичСскиС ΠΏΡ€Π°Π²ΠΈΠ»Π° ΠΊ imageSmoothingEnabled . ) Canvas API ΠΌΠΎΠΆΠ΅Ρ‚ ΠΏΡ€Π΅Π΄ΠΎΡΡ‚Π°Π²ΠΈΡ‚ΡŒ запасноС Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ для pixelated посрСдством Ρ€ΡƒΡ‡Π½ΠΎΠ³ΠΎ управлСния Π΄Π°Π½Π½Ρ‹ΠΌΠΈ изобраТСния ΠΈΠ»ΠΈ с ΠΏΠΎΠΌΠΎΡ‰ΡŒΡŽ imageSmoothingEnabled .

CSS
.auto {
  image-rendering: auto;
}
.pixelated {
  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: pixelated;
}
.crisp-edges {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}
Result

Specifications

Specification
ΠœΠΎΠ΄ΡƒΠ»ΡŒ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ CSS, ΡƒΡ€ΠΎΠ²Π΅Π½ΡŒ 3
# the-image-rendering

Browser compatibility

DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebView AndroidChrome AndroidFirefox для AndroidOpera AndroidSafari на IOSSamsung Internet
image-rendering

13

79

3.6

No

15

6

3

18

4

14

6

1. 0

crisp-edges

13

79

65

3.6

No

15

7

6

≀37

18

65

4

14

7

6

1.0

optimizeQuality

28

79

3.6

No

15

7

≀37

28

4

14

7

1.5

optimizeSpeed

28

79

3.6

No

15

7

≀37

28

4

14

7

1.5

pixelated

41

79

93

No

26

10

41

41

93

26

10

4. 0

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅. Π₯отя прСдполагаСтся, Ρ‡Ρ‚ΠΎ

crisp-edges ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΠΎΠ²Π°Π½ΠΈΠ΅ пиксСльной Π³Ρ€Π°Ρ„ΠΈΠΊΠΈ, ΠΊΠ°ΠΊ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π΅ спСцификации, Π½Π° ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠ΅ Π½ΠΈ ΠΎΠ΄ΠΈΠ½ Π±Ρ€Π°ΡƒΠ·Π΅Ρ€ (ΠΏΠΎ ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ Π½Π° ΡΠ½Π²Π°Ρ€ΡŒ 2020 Π³.) этого Π½Π΅ Π΄Π΅Π»Π°Π΅Ρ‚. Π’ Firefox crisp-edges ΠΈΠ½Ρ‚Π΅Ρ€ΠΏΡ€Π΅Ρ‚ΠΈΡ€ΡƒΡŽΡ‚ΡΡ ΠΊΠ°ΠΊ блиТайший сосСд, пиксСлизация pixelated поддСрТиваСтся, Π° auto интСрполируСтся ΠΊΠ°ΠΊ трилинСйная ΠΈΠ»ΠΈ линСйная.

Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ ΠΎ ΠΏΠΎΠ²Π΅Π΄Π΅Π½ΠΈΠΈ Π² Chromium ΠΈ Safari (WebKit) см. Π’ функциях GetInterpolationQuality ΠΈ CSSPrimitiveValue::operator ImageRendering() соотвСтствСнно.

See also

  • Π”Ρ€ΡƒΠ³ΠΈΠ΅ изобраТСния , связанныС свойства CSS: object-fit , object-position
    , image-orientation , image-rendering , image-resolution .

Β© 2005–2021 Авторы MDN.
ЛицСнзия Creative Commons Attribution-ShareAlike License v2.5 ΠΈΠ»ΠΈ Π±ΠΎΠ»Π΅Π΅ поздняя.
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering

ИзмСнСниС Ρ€Π°Π·ΠΌΠ΅Ρ€Π° ΠΊΠ°Ρ€Ρ‚ΠΈΠ½ΠΊΠΈ Π² ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³Π΅

mantis
Новичок