Kto nam vytvori eshopy v 3. krajinach s API napojenim na dodavatela?
Zobrazují se odpovědi 1 až 7 z 7

Flexbox itemy a poměry stran obrázku

  1. Zdravím,
    mám přehledovou stránku s obrázky, které jsou primárně na šířku, ale vyskytnou se tam i na výšku. Jak je vidět na obrázku, tak obrázek na výšku se roztáhne na plnou šířku.

    Mým cílem je mít obrázek na výšku (poslední) stejně vysoký jako na obrázky na šířku. To jsem nyní dosáhnul tím, že jsem obrázku nastavil pevnou výšku (nouzové řešení).

    Obalovací div (class ".row") má nastaveno display: flex a tudíž jednotlivé div.reference-list__item mají výšku podle nejvyššího divka (posledního).

    Napadá někoho, jak by se dal obrázek zmenšit aby řádka byla stejně vysoká? Přes pevnou výšku obrázku bych to úplně řešit nechtěl. Web je responzivní a používám Bootstrap 4.

    Díky za rady

    Název:  tatka-fotky.jpg
Zobrazení: 104
Velikost:  154,2 KB
    Přiložené miniatury Přiložené miniatury Klikněte na obrázek pro plnou velikost Název:  tatka-fotky.jpg Zobrazení: 15 Velikost:  317,8 KB  

  2. Co se právě děje na Webtrhu?
    Vojtas@onio.cz prodává: Prodej projektu Duchod.cz - SLEVA
    Jiří Hudec nabízí: 360 fotky + produktové foto
    Štěpán L. poptává: UX / UI specialista
  3. Zmého pohledu vidím jediné řešení a to je "max-height". Protože jinak říct ani nemůžeš, jak má být co velké.

    .reference-list .row { justify-content: space-between; /* např., nebo space-around */ }
    .reference-list__item { max-height: 100px; }

    Ono to samo nevyhodnotí, co a jak má být velké. Leda že bys ty na šířku natáhl na ten na výšku (čímž to bude všechno ale moc velké). Ale to ty dle mého nechceš.

  4. Máte několik možností jak váš problém řešit:

    1) Do sloupců dát div jako kontejner obrázků - tomu nastavit max-height a overflow: hidden, všechny obrázky se budou muset vlézt do kontejneru a nijak se změní (u vysokých by část obrázku navíc prostě nešla viděl - neroztáhl by se ovšem na 100% šířky sloupce tak jak nejspíše chcete).

    2) Opět dát do sloupců div jako konejner obrázků a pohrát si object-fit obrázku viz. https://developer.mozilla.org/en-US/...CSS/object-fit ~ IE má smůlu, možná najdete nějaký polyfill který object-fit zobrazí pomocí background-image. Lze nastavit aby se obrázek rozáhl do kontejneru a jak, takže by všechny položky byly stejně vysoké a široké. (zhruba to samé lze udělat pomocí background-size a upravením DOMu, ale toto je jednodušší)

    3) Pomocí CSS můžete vynutit poměr stran obrázků a nastavit jaká jeho část se má zobrazit viz. https://blog.theodo.fr/2018/01/respo...mes-css-trick/ ~ Toto by fungovalo i v IE, ale komplikovanější.

    Nejjjednodušší na nastavení bude object-fit (2)), jestli chcete podporu IE, tak najít polyfill.

    EDIT: Ještě mě napadlo - nemusíte nic nastavovat v CSS, můžete si zkontrolovat výšky a nastavit si je jak chcete Javascriptem.

  5. Citace Původně odeslal Miroslav Foltýn Zobrazit příspěvek
    Máte několik možností jak váš problém řešit:

    1) Do sloupců dát div jako kontejner obrázků - tomu nastavit max-height a overflow: hidden, všechny obrázky se budou muset vlézt do kontejneru a nijak se změní (u vysokých by část obrázku navíc prostě nešla viděl - neroztáhl by se ovšem na 100% šířky sloupce tak jak nejspíše chcete).

    2) Opět dát do sloupců div jako konejner obrázků a pohrát si object-fit obrázku viz. https://developer.mozilla.org/en-US/...CSS/object-fit ~ IE má smůlu, možná najdete nějaký polyfill který object-fit zobrazí pomocí background-image. Lze nastavit aby se obrázek rozáhl do kontejneru a jak, takže by všechny položky byly stejně vysoké a široké. (zhruba to samé lze udělat pomocí background-size a upravením DOMu, ale toto je jednodušší)

    3) Pomocí CSS můžete vynutit poměr stran obrázků a nastavit jaká jeho část se má zobrazit viz. https://blog.theodo.fr/2018/01/respo...mes-css-trick/ ~ Toto by fungovalo i v IE, ale komplikovanější.

    Nejjjednodušší na nastavení bude object-fit (2)), jestli chcete podporu IE, tak najít polyfill.

    EDIT: Ještě mě napadlo - nemusíte nic nastavovat v CSS, můžete si zkontrolovat výšky a nastavit si je jak chcete Javascriptem.
    Tím JS by to bylo asi nejjednodušší z Vámi nabízených variant. Počkám jestli ještě někdo něco neporadí.

  6. Vážně? Místo použití max-height (nebo height) a width auto (max 2 nebo 3 řádky v CSS) chcete používat nějaké zbytečné a složité cesty jako JS? Může mi někdo vysvětlit proč?

    EDIT: Pomocí JS vzít výšku nejmenšího a všechny nastavit je proč lepší, než to nechat v CSS a v adminu, nebo kde se nahrává obrázek, dát rozmezí a mít klid (popřípadě poučit klienta, jaký obrázky vkládat -> nějaký minimální rozměry).

  7. Záleží na tom čeho chcete dosáhnout, zmíněné metody jsem kromě 3* + kombinace s JS načrtl zde, pro inspiraci by mělo stačit, na webu ještě ošetřit na změny rozlišení apod.

    JS fiddle

  8. Citace Původně odeslal Doctore97 Zobrazit příspěvek
    Vážně? Místo použití max-height (nebo height) a width auto (max 2 nebo 3 řádky v CSS) chcete používat nějaké zbytečné a složité cesty jako JS? Může mi někdo vysvětlit proč?

    EDIT: Pomocí JS vzít výšku nejmenšího a všechny nastavit je proč lepší, než to nechat v CSS a v adminu, nebo kde se nahrává obrázek, dát rozmezí a mít klid (popřípadě poučit klienta, jaký obrázky vkládat -> nějaký minimální rozměry).
    Máte pravdu, v CSS to byly 2 radky + osetrit jednotlive breakpointy. To slo taky docela rychle. Takze vyhrala vase varianta pred JS.

    ---------- Příspěvek doplněn 28.12.2018 v 00:37 ----------

    Citace Původně odeslal Miroslav Foltýn Zobrazit příspěvek
    Záleží na tom čeho chcete dosáhnout, zmíněné metody jsem kromě 3* + kombinace s JS načrtl zde, pro inspiraci by mělo stačit, na webu ještě ošetřit na změny rozlišení apod.

    JS fiddle
    Diky, priklady si projdu. Abych vedel pro priste.

Hostujeme u Server powered by TELE3