Testování vytvoření prostoru pro obrázek při načítání stránky

• Na problém s vytvořením prostoru pro obrázek při načítání stránky jsem přišel úplnou náhodou při testování předchozího problému s mezerou pod obrázkem. Přiznávám, že jsem o tomto problému dříve nevěděl, protože jsem o něm nikde neslyšel ani nečetl, je totiž poměrně těžké ho odhalit. Ale vezměme to opět popořádku.
  Představme si stránku s textem, ve kterém jsou vložené obrázky (fotografie), tímto textem obtékané. Protože se obrázky stahují později než text, stránka se nejprve zformátuje bez obrázků a teprve jakmile obrázky ze serveru dorazí, vkládají se do již formátované stránky a stránka se tak formátuje znovu. Text se dodatečně rozestupuje a dělá tak vlastně obrázkům místo.
  Tomuto neprofesionálnímu řešení se lze snadno vyhnout použitím atributů width a height elementu <img />:
  
  <img src="obrazek.jpg" width="190" height="190" alt="obrázek" border="1" />,
  
  nebo CSS deklarací výšky a šířky elementu <img />:
  
  <img src="obrazek.jpg" style="width:190px; height:190px; border:solid 1px black" alt="obrázek" />,
  
  které již v průběhu stahování dat vytvoří na stránce v textu prostor (ideálně se skutečnou velikostí obrázku), do kterého se obrázek vloží a stránka se tak formátuje jen jednou.
  Zda se prostor vytvoří nebo ne, je ale vidět jen tehdy, je-li velmi pomalé připojení k internetu, nebo pokud se z nějakého důvodu obrázek nezobrazí (např. je chyba v názvu obrázku, nebo na serveru vůbec není). Proto je také složitější si problému všimnout.
  
  
• V čem tedy ale je vlastně problém? V prohlížeči Firefox 3 se prostě prostor definovaný výškou a šířkou obrázku nezobrazí! Aby byl problém dobře vidět, konkrétní obrázek se v následujícím příkladu záměrně nezobrazuje. V Exploreru, Safari a Opeře je rámeček o správné velikosti 190 x 190px, ve Firefoxu ale pouze malý rámeček kolem alternativního textu.
  
  <img src="obrazek.jpg" style="width:190px; height:190px; border:solid 1px black" width="190" height="190" alt="obrázek" />
  
  
  
  Nejdříve jsem považoval tento problém za chybu Firefoxu, ale předchozí testování problému mezer pod obrázky mi jednak velmi pomohlo s řešením a také změnilo můj prvotní názor, které zobrazení je vlastně správné.
  
  Jak již bylo zmíněno v předchozím testu, element <img /> je podle specifikace CSS prvkem typu in-line (řádkovým) a u těchto prvků se velikosti zobrazovat nesmí, viz např. tento testovací soubor a ukázka elementu <span>. Otázkou zůstává, proč Explorer ve standardním módu, Safari a Opera u <span> velikost správně nepodporuje, ale u <img /> ano, každopádně chybné zobrazení prostoru pro obrázek je tedy v Exploreru, Safari a Opeře, správně by podle předchozí teorie rámeček s nastavenou velikostí být zobrazen opravdu neměl. Jeho praktický význam je ale pro rychlé formátování stránky značný a tak (po prostudování předchozího problému s mezerami) již asi řešení tušíte také - display:block! Následující ukázka zobrazí správně velký rámeček již ve všech prohlížečích.
  
  <img src="obrazek.jpg" style="display:block; width:190px; height:190px; border:solid 1px black" alt="obrázek" />
  
  
  
  Řešení je ještě jedno - vkládat navíc obrázky vždy do <div> s nastavenou velikostí, ale řešení předchozí se mi zdá profesionálnější (i proto, že v Exploreru 6 a 7 je pod obrázkem mezera, takže se nastavení vlastnosti display:block pro obrázek stejně nevyhneme, viz opět předchozí test):
  
  <div style="border: solid 1px black; width:190px; height:190px">
    <img style="border:solid 1px red; width:190px; height:190px" src="obrazek.jpg" alt="obrázek" />
  </div>
  
  <div style="border: solid 1px black; width:190px; height:190px">
    <img style="display:block; border:solid 1px red; width:190px; height:190px" src="obrazek.jpg" alt="obrázek" />
  </div>
  
  
  
  Nakonec jsem téměř o rok později od napsání předchozího textu objevil jednu zvláštnost prohlížeče Firefox, v němž není velikost prostoru definovaného výškou a šířkou obrázku (správně) zobrazena. Když chcete mít obrázek obtékaný textem a použijete tedy např. vlastnost float:right, rámeček se s nastavenou velikostí zobrazí! Vlastnost float tedy zřejmě přepíná element <img /> automaticky na display:block (viz ukázka v tomto odstavci).
  
  <img src="obrazek.jpg" style="float:right; width:120px; height:120px; margin-left:5px; border:solid 1px black" alt="obrázek" />
  
  
  
  
  
  Poslední aktualizace: , pepe © 2007     

  ---