Diskuze: Potřebuji poradit s obtékáním obrázku v galerii
Zobrazeno 5 zpráv z 5.
//= Settings::TRACKING_CODE_B ?> //= Settings::TRACKING_CODE ?>
Zalezi na tom, jaka operace se ma provest.
Co jsi nasel googlem? google = image html css fill area
<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;}
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
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.
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!! 😌
Zobrazeno 5 zpráv z 5.