/* --- Vylepšení vzhledu galerie produktů --- */

/* 1. Styl pro hlavní obrázek */
.p-image {
    border-radius: 8px; /* Zakulacení rohů */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Jemný stín pro 3D efekt */
    overflow: hidden; /* Zajistí, že obrázek nepřesáhne zakulacené rohy */
}

/* 2. Kontejner pro náhledové obrázky - zajistí hezké rozestupy */
.p-thumbnails-inner {
    display: flex;
    gap: 10px; /* Vytvoří mezeru 10px mezi jednotlivými náhledy */
    padding-top: 15px; /* Odsazení náhledů od hlavního obrázku */
}

/* 3. Základní styl pro jednotlivé náhledy */
.p-thumbnail {
    border-radius: 6px; /* Zakulacení rohů */
    padding: 2px; /* Malé vnitřní odsazení */
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease; /* Plynulý přechod pro všechny změny (transformace, barva rámečku) */
    cursor: pointer;
}

/* 4. Efekt při najetí myší na náhled */
.p-thumbnail:hover {
    transform: scale(1.0); /* Mírné zvětšení náhledu */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Zvýraznění stínu */
}

/* 5. Styl pro aktivní/vybraný náhled (ten, který je zobrazený nahoře) */
.p-thumbnail.highlighted {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); /* Výraznější stín */
}

/* Ujistíme se, že obrázek uvnitř náhledu respektuje zakulacené rohy */
.p-thumbnail img {
    border-radius: 4px;
}
Parťák v programování

Zobrazit uvažování
Aha, už rozumím! Jasně, cíl je tedy stejný jako u náhledů, ale pro ten velký, hlavní obrázek. To je skvělý nápad, protože to sjednotí vzhled všech produktových stránek, i když mají obrázky v různých rozměrech.

Použijeme naprosto stejný princip jako u náhledů: vlastnost object-fit: cover;. Tím zajistíme, že obrázek vždy vyplní celý svůj rámeček, aniž by se zdeformoval.

## Nový CSS kód pro hlavní obrázek
Tento nový kousek kódu jednoduše přidejte na konec toho CSS, které jsme už vytvořili.

CSS

/* 7. Úprava pro hlavní obrázek (aby vyplnil prostor) */

/* Kontejneru hlavního obrázku stále držíme pevný poměr stran */
.p-image {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* A samotnému obrázku vnutíme nové rozměry s !important */
.p-image img {
    width: 100% !important;        /* Vynutí plnou šířku */
    height: 100% !important;       /* Vynutí plnou výšku */
    object-fit: cover !important;  /* Vynutí oříznutí a vyplnění */
}