Vydělávej až 160.000 Kč měsíčně! Akreditované rekvalifikační kurzy s garancí práce od 0 Kč. Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Potřebuji poradit s obtékáním obrázku v galerii

Aktivity
Avatar
Jan Steiner
Člen
Avatar
Jan Steiner:24.1.2022 18:51

Ahoj, chtěl bych mít na webu galerii obrázků kde každý obrázek bude stejně široký ale výška se bude lišit a mě jde o to aby obrázky vyplnili celý prostor a nevznikali mi mezi obrázky mezery(červeně zaznačené na obrázku)

Zkusil jsem: Zkoušel jsem floatovat, zkoušel jsem tomu dávat inline-block a pořád nic. Už si nevím rady.

Chci docílit: Viz. obrázek

 
Odpovědět
24.1.2022 18:51
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:24.1.2022 22:39

Zalezi na tom, jaka operace se ma provest.
Co jsi nasel googlem? google = image html css fill area

  • bud pouzijes css cover, coz je pro background
  • object-fit: cover; pro img https://www.w3schools.com/…ject-fit.asp
  • nebo nastavis jeden rozmer a druhy ne, ten se automaticky dopocita <img width="200"> <img height="300">

Viz ten v3school (kde nebyva sve uplne dobre, ale da se to), muzes si udelat tez class

.fill {object-fit: fill;}
.contain {object-fit: contain;}
.cover {object-fit: cover;}
.scale-down {object-fit: scale-down;}
.none {object-fit: none;}
Editováno 24.1.2022 22:41
 
Nahoru Odpovědět
24.1.2022 22:39
Avatar
Jan Steiner
Člen
Avatar
Odpovídá na Peter Mlich
Jan Steiner:25.1.2022 20:16

Nevím jestli jsi správně pochopil čeho potřebuji docílit, tak jsem upravil obrázek jak si představuji aby vypadal finál

 
Nahoru Odpovědět
25.1.2022 20:16
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:25.1.2022 22:09

Tos mel uvest jako prvni, kdyz to neumis popsat :)

google = image galerry html5 css3
https://wpdatatables.com/…age-gallery/
-> https://salvattore.js.org/

google = https://salvattore.js.org/
Image Reflect CSS Gallery https://codepen.io/…full/ExaGgoa
https://codepen.io/…/full/PxjZvj https://codepen.io/…/full/PxjZvj

google = css grid image gallery // postupne, jak googlujes, tak doplnujes slova do vyhledavani, ktera najdes
https://www.freecodecamp.org/…0f0fd666a5c/
Tady mas sikovne vyuziti gridu, ale ty hledas sloupcovy layout.

google = css column gallery
https://www.w3schools.com/…sponsive.asp
(w3schools.com neni moc spolehlivy zdroj, ocekavej obcas, ze neco nefunguje, jak by melo)

--> google = css flex column images layout

<div class="row">
  <div class="column">
    <img src="wedding.jpg">
    <img src="rocks.jpg">
    <img src="falls2.jpg">
    <img src="paris.jpg">
    <img src="nature.jpg">
    <img src="mist.jpg">
    <img src="paris.jpg">
  </div>
  <div class="column">
    <img src="underwater.jpg">
    <img src="ocean.jpg">
    <img src="wedding.jpg">
    <img src="mountainskies.jpg">
    <img src="rocks.jpg">
    <img src="underwater.jpg">
  </div>
  <div class="column">
    <img src="wedding.jpg">
    <img src="rocks.jpg">
    <img src="falls2.jpg">
    <img src="paris.jpg">
    <img src="nature.jpg">
    <img src="mist.jpg">
    <img src="paris.jpg">
  </div>
  <div class="column">
    <img src="underwater.jpg">
    <img src="ocean.jpg">
    <img src="wedding.jpg">
    <img src="mountainskies.jpg">
    <img src="rocks.jpg">
    <img src="underwater.jpg">
  </div>
</div>
<style>
.row {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    flex: 100%;
    max-width: 100%;
  }
}
</style>

5 min googlovani. Kolik to trvalo tobe? Ze jsi jeste nezacal? To je bezna chyba zacatecnika, ani to nezkusi.

Editováno 25.1.2022 22:10
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
25.1.2022 22:09
Avatar
Jan Steiner
Člen
Avatar
Odpovídá na Peter Mlich
Jan Steiner:27.1.2022 18:39

Paráda, děkuji moc. A jinak rád bych řekl, že jsem to nehledal ale opravdu jsem to zkoušel najít jen jsem nevěděl jak to správně nazvat a taky jsem dost času strávil nad tím jak to vyřešit ale takhle jednoduše mě to nenapadlo. Ještě jednou díky moc!! 😌

 
Nahoru Odpovědět
27.1.2022 18:39
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 5 zpráv z 5.