Te dni sem iskal najboljši slog za slike na tem blogu. Ta je določen preko CSS datoteke, ki jo iterativno izboljšujem, da bi bila ta stran karseda uporabna, lepa in konsistentna (v tem vrstnem redu). Interno uporabljam Jekyll Picture Tag, ki poskrbi za lepo obrezane in skalirane slike glede na dimenzije naprave ter jih samodejno vgradi v html, kar je prišlo še posebej prav pri Invader članku. Vendar ta ne podpira slik svg formata, ki jih moram torej vgraditi sam. Glavni izziv je odzivnost — prilagajanje na velikost okna brskalnika.

Za slike na svojem blogu imam sledeče zahteve: morajo biti horizontalno centrirane, upoštevati neko maksimalno višino, se skalirati s širino okna brskalnika in dopuščati podnaslov, ki je vedno enake širine kot slika. Skromna želja je bila tudi ta, da bi lahko sliko vgradil z markdown sintakso.

Na poti do idealne rešitve sem pomoje šel čez popolnoma vse ostale možne rešitve: dati sliko v div.container, jo omejiti z object-fit: contain, jo postaviti v display: flex element, posebej nastaviti margin: auto za centriranje, dati sliko in podnaslov v <table>, ki sem ga potlej skušal prepričati, da se drži pravilne širine. Enkrat sem bil že skoraj zadovoljen z rešitvijo, da <p>, v katerega markdown avtomatsko zavije sliko, deluje kot krovni element preko CSS selektorja p:has(> img), vendar ima ta selektor šibkost, da je šele od leta 2023 podprt s strani večine brskalnikov. Hekatija se trudi biti uporabna za karseda veliko brskalnikov, tako da sem to rešitev izključil.

Da ne bom zezal bralca preveč, predstavljam sveti gral odzivnih slikic:

figure {
    display: table;
    margin: .5em auto;
}

figure img:not(.emoji) {
    display: block;
    max-height: 18em;
    height: 100%;
    width: 100%;
    background-color: #ffffff40;
}

figure figcaption {
    text-align: center;
    font-style: italic;
    font-size: .9em;
    display: table-caption;
    caption-side: bottom;
    padding: 0 .5em;
    background-color: #ffffff40;
}

Tu je najvišja višina slike nastavljena na max-height: 18em, podnaslov pa se po širini ujema z njo. Glavni “trik” je nastaviti display: table na krovni element, da cela zadeva torej deluje kot nekakšna tabela. Sliko se potem vstavi s HTML kodo

<figure>
  <a href="/assets/images/icons/android-chrome-512x512.png">
    <img src="/assets/images/icons/android-chrome-512x512.png" alt="Hekatija.com brskalniška ikonica.">
  </a>
  <figcaption>Hekatija — maskota bloga.</figcaption>
</figure>

kar izgleda tako:

Pri tej konfiguraciji sem naletel na nekaj težav s to sliko; upam, da je ta patološka in se mi z njo ne bo treba kdaj ukvarjati, saj nimam pojma, kaj storiti. Moja rešitev pa vseeno verjetno ni dokončna — morda bom z njo nezadovoljen že jutri.

Motivator za ta kratek članek pa je žalostno naključje, ki se mi je zgodilo ravno te dni, ko sem pilil pričujočo kodo. Na svojem dolgem seznamu člankov, ki jih nameravam prebrati, sem ravno po mukotrpnem odkritju display: table rešitve našel ta članek. Avtor… je odkril isto kot jaz.