Слике

Дијалог упозорења

Ако је слика шира од колоне главног садржаја — као што се често дешава на мањим екранима — ДевСите је аутоматски ограничава на ширину колоне. Међутим, ако слика има подешене атрибуте width и height , мења се само ширина, што доводи до изобличења слике. Сходно томе, не постављајте height слике . То значи да се страница може поново нацртати ако се слика споро учитава (изазива скок), али то је боље од слике која не стане на екран.

Можете применити class="screenshot" на слику да бисте јој дали ивицу која је помера од оближњег текста. Ово се обично користи за снимке екрана који имају белу позадину и на други начин се изгубе на страници. Немојте га користити за слике којима није потребан.

Плутајући поред текста

Слика са десне стране такође има class="attempt-right" , који лебди слику удесно на већим екранима, али тера слику у вертикални распоред на мањим екранима, таблетима и мањим, где би лебдење удесно изазвало проблеме. Доступан је и class="attempt-left" . Да бисте користили attempt-left и attempt-right заједно, уверите се да је елемент attempt-left на првом месту.

Када су слике плутајуће, не могу да пређу 50% ширине колоне. Ако хоће, они се рескалирају.

<img src="/path/to/image.png" alt="Alert dialog"
     class="screenshot attempt-right">

Можете да користите исте класе за плутање других елемената, као што је <figure> која садржи и слику и натпис:

<figure class="attempt-right">
  <img src="/path/to/image.png" alt="Alert dialog" class="screenshot">
  <figcaption><b>Figure 1</b>: Alert dialog</figcaption>
</figure>

Брисање плутајућег текста

Да бисте спречили да се текст омота око плутајућег елемента и да се прикаже на његовој изворној ширини, можете додати clear класу погођеним елементима који прате лебдећи елемент.

<p class="clear">Hello world.</p>

Пример са јасном класом

У овом примеру, други пасус укључује clear класу.

Дијалог упозорења

Овај параграф се премотава око лебдеће слике . Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит, сед до еиусмод темпор инцидидунт ут лаборе ет долоре магна аликуа.

Овај пасус има јасну класу и не премотава се око лебдеће слике . Дуис ауте ируре долор ин репрехендерит ин волуптате велит ессе циллум долоре еу фугиат нулла париатур. Екцептеур синт оццаецат цупидатат нон проидент, сунт ин цулпа куи оффициа десерунт моллит аним ид ест лаборум. Ут еним ад миним вениам, куис ноструд екерцитатион улламцо лаборис ниси ут аликуип ек еа цоммодо цонсекуат. Немо еним ипсам волуптатем куиа волуптас сит аспернатур аут одит аут фугит, сед куиа цонсекуунтур магни долорес еос куи ратионе волуптатем секуи несциунт. Некуе порро куискуам ест, куи долорем ипсум куиа долор сит амет, цонсецтетур, адиписци велит, сед куиа нон нумкуам еиус моди темпора инцидунт ут лаборе ет долоре магнам аликуам куаерат волуптатем.

Пример без јасне класе

У овом примеру, оба пасуса се омотавају око лебдеће слике.

Дијалог упозорења

Овај пасус се премотава око лебдеће слике . Лорем ипсум долор сит амет, цонсецтетур адиписцинг елит, сед до еиусмод темпор инцидидунт ут лаборе ет долоре магна аликуа.

Овај пасус се премотава око лебдеће слике . Дуис ауте ируре долор ин репрехендерит ин волуптате велит ессе циллум долоре еу фугиат нулла париатур. Екцептеур синт оццаецат цупидатат нон проидент, сунт ин цулпа куи оффициа десерунт моллит аним ид ест лаборум. Ут еним ад миним вениам, куис ноструд екерцитатион улламцо лаборис ниси ут аликуип ек еа цоммодо цонсекуат. Немо еним ипсам волуптатем куиа волуптас сит аспернатур аут одит аут фугит, сед куиа цонсекуунтур магни долорес еос куи ратионе волуптатем секуи несциунт. Некуе порро куискуам ест, куи долорем ипсум куиа долор сит амет, цонсецтетур, адиписци велит, сед куиа нон нумкуам еиус моди темпора инцидунт ут лаборе ет долоре магнам аликуам куаерат волуптатем.

Слике тамне теме

ДевСите обезбеђује мали скуп назива класа који се могу применити на слике да би се променио њихов изглед када је тамна тема омогућена.

Затамњење слике

Подразумевано, све слике осим СВГ датотека су благо затамњене у тамној теми.

Да бисте уклонили подразумевано затамњење са слике када је тамна тема омогућена, додајте класу без филтера на слику:

<img src="/path/to/image.jpg" class="no-filter" alt="">

Инвертовање слике

За слике са црном или тамном монохроматском палетом боја, додајте класу invert слици да би приказала бело/светло у тамној теми:

<img src="/site-assets/logo-github.png" class="invert" alt="">

За страницу _index.yaml , додајте invert у поље classname за ставку реда:

- items:
  - classname: invert
    icon:
      path: /site-assets/logo-github.png

Одвојите слику варијанте тамне теме

Ако желите да обезбедите засебну слику која се приказује само када је тамна тема омогућена, умотајте постојећи елемент <img> у елемент <picture> и додајте елемент <source> за варијанту тамне теме.

У примеру испод, постоје две СВГ датотеке за Гоогле реч у оквиру елемента <picture> . Када је тамна тема онемогућена, приказује се датотека слике унутар <img> елемента, која приказује словни жиг са четири боје Гоогле бренда. Када је тамна тема омогућена, приказује се датотека слике унутар елемента <source> , где је словни жиг потпуно бела и нема боје бренда.

Пример

Код

<picture>
  <source
    srcset="/devsite/images/google-dark-theme.svg"
    media="(prefers-color-scheme: dark)"
    class="devsite-dark-theme"
    alt="">
  <img src="/devsite/images/google.svg" alt="">
</picture>

Напомене

Пошто је тамна тема омогућена иза ознаке функције, имајте на уму следеће о атрибутима елемента <source> :

Елемент <source> мора да садржи класу devsite-dark-theme , која обезбеђује закачивање за ДевСите-ов фронтенд да ажурира атрибут медија и његову вредност у зависности од опције тамне теме коју је изабрао корисник: light , dark или device . Атрибут медија мора да садржи (prefers-color-scheme: dark) медијски упит у својој вредности. Ако већ имате <source> елементе са media упитима у атрибуту медија, или додајте постојеће медијске упите са и (преферс-цолор-сцхеме: дарк) или додајте нови <source> елемент чија је вредност медијског атрибута (prefers-color-scheme: dark) . Упит media и његова вредност биће уклоњени или замењени у зависности од опције тамне теме коју је изабрао корисник. Иако име датотеке слике варијанте тамне теме у атрибуту srcset технички може бити било шта, препоручује се додавање -dark-theme имену датотеке постојеће слике.