Občas sa stretávam s tým, že klient potrebuje, aby obrazok v "Hero sekcii" na webe prekryl celú šírku obrazovky, ale zároveň chce, aby sa obrázok zobrazil celý bez orezania. Najčastejšie sa "Hero obrázok" vloží ako "background-image" a aby sa zabezpečilo, že pokryje celú plochu obrázka, tak sa jeho "background-size" nastaví na "cover". Toto jednoduché riešenie často postačuje (takto to robím aj ja na svojom blogu). Lenže takto sa obrázok nezobrazí vždy celý. Keďže "Hero sekcia" má zvyčajne pevne nastavenú výšku, pomer výšky a šírky tejto sekcie sa mení v závislosti na veľkosti okna prehliadača. A to pri niektorých obrázkoch môže byť problém, pretože sa môže odrezať jeho dôležitá časť.

Riešením je zabezpečiť to, aby sa výška "hero sekcie" prispôsobila proporciám použitého obrázka. Výšku "hero sekcie" teda nenastavíme, ale sekcii nastavíme "padding bottom". Hodnotu "paddingu" vypočítame z rozmerov obrázka calc(100% * vyska/sirka). Nekoniec "background-size" nastavíme na"contain".

HTML kód

<section class="hero">
  <div class="container">
    <h1>Lorem ipsum</h1>
  </div>
</section>

CSS:

<style>
    .hero {   
      position: relative; 
      background-image: url('1200x800.jpg');
      background-size: contain;
      background-repeat: no-repeat;
      width: 100%;
      padding-bottom: calc(100% * 800/1200);
    }
    .container {
      position: absolute;
      top: 10%;
      left: 50%;
      -moz-transform: translateX(-50%);
      -webkit-transform: translateX(-50%); 
      transform: translateX(-50%); 
    }
</style>

Po tejto úprave sa v "Hero sekcii" zobrazí celý obrázok. Zároveň nie je potrebné upravovať html kód.
Mimochodom, toto riešenie môžete použiť, aj ked chcete vložiť na web youtube video ktorého výška sa má proporčne prispôsobiť šírke obrazovky.