Gå til innhold

bildegalleri med css grid

killertomato

Anbefalte innlegg

killertomato

killertomato

Skrevet
Skrevet (endret)

Hei

 

Jeg prøver å lage et bildegalleri der jeg tenker å ha 3 kolonner i bredden. Hvert bilde i gridden skal være kvadratisk og gridden skal være responsiv slik at bildene skalerer med bredden av browseren. Jeg kommer til å bruke bilder av ulike proporsjoner i galleriet, men thumbnailene i gridden skal altså alltid være kvadratiske der de ikke strekkes, men croppes av der bildet går utenfor det kvadratiske formatet.

 

Jeg har klart å sette opp de tre kolonnene med grids, men vet ikke hvordan jeg skal få de til å alltid være kvadratiske. Kan jeg på en eller annen måte sette height til være lik width?

 

 

CSS:

 

.grid-container_gallery {
  width: 100%;
  list-style-type: none;
  display: inline-grid;
  grid-template-columns: auto auto auto;
  grid-gap: 1px;
  padding: 0em;
}
 
.grid-container_gallery img {  
  width: 100%;
}
 
.grid-container_gallery li {
  max-height:  (Kan jeg sette denne til å være lik width?)
}
 
 
HTML:
 

<ul class="grid-container_gallery">

 

<li>
<a href="./bilde_01.jpg">
<img src="./bilde_thmb_03.jpg" />
</a>
</li>
 
<li>
<a href="./bilde_02.jpg">
<img src="./bilde_thmb_03.jpg" />
</a>
</li>
 
<li>
<a href="./bilde_02.jpg">
<img src="./bilde_thmb_03.jpg" />
</a>
</li>
 
</ul>
Endret av killertomato
Lenke til kommentar

Videoannonse

Videoannonse
Annonse
Emancipate

Emancipate

Skrevet
Skrevet (endret)

men croppes av der bildet går utenfor det kvadratiske formatet.

Gud, som jeg hater dette.

 

Hvert bilde i gridden skal være kvadratisk og gridden skal være responsiv slik at bildene skalerer med bredden av browseren

Hvordan er det responsivt? I mitt hode ville responsivt bety at det kommer flere bilder på hver rad ettersom vinduet blir bredere.

 

CSS er "overcomplicated and underpowered". For hvert nye tillegg blir det mer og mer åpenbart.

 

For øvrig får jeg til dette med vanling inline-block og bildene som bakgrunnsbilder:

(Merk at det ikke kan være mellomrom mellom </div> og neste <div>.)

<!DOCTYPE html>
<html>

<head>
    <title>untitled</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <style>
        * {padding: 0px; margin:0px;}
        
        .imgbox {
        display: inline-block;
        width: 33%;
        }
        
        .aspect_square {
        padding-top: 100%;
        background-position: center;
        background-size: cover;
        }
    </style>
</head>

<body>

    <div class=imgbox>
        <div class=aspect_square style="background-image: url('1.jpg')">


        </div>
    </div><div class=imgbox>
        <div class=aspect_square style="background-image: url('2.jpg')">

        </div>
    </div><div class=imgbox>
        <div class=aspect_square style="background-image: url('3.jpg')">
        </div>
    </div>
</body>

</html>
Endret av Emancipate
Lenke til kommentar
killertomato

killertomato

Skrevet
  • Forfatter
Skrevet (endret)

 

men croppes av der bildet går utenfor det kvadratiske formatet.

Gud, som jeg hater dette.

 

Det må nesten bli sånn hvis jeg skal få skviset bilder i ulike proposjoner inn i et grid system. Alternativet er at hele bildet blir plassert innenfor den kvadratiske boksen med svarte felter oppe og nede eller på sidene. Et annet alternativ som jeg også har vurdert er masonry gallery, men da listes listeelementene vertikalt med kolonnene istedenfor horisontalt. Det synes jeg ikke noe om. Kom gjerne med noen andre forslag til hvordan jeg heller burde løse det.

Endret av killertomato
Lenke til kommentar
killertomato

killertomato

Skrevet
  • Forfatter
Skrevet (endret)

Hvert bilde i gridden skal være kvadratisk og gridden skal være responsiv slik at bildene skalerer med bredden av browseren

Hvordan er det responsivt? I mitt hode ville responsivt bety at det kommer flere bilder på hver rad ettersom vinduet blir bredere.

 

CSS er "overcomplicated and underpowered". For hvert nye tillegg blir det mer og mer åpenbart.

 

For øvrig får jeg til dette med vanling inline-block og bildene som bakgrunnsbilder:

(Merk at det ikke kan være mellomrom mellom </div> og neste <div>.)

 

Du har rett. Jeg forklarte litt dårlig her. Det jeg mener er at gridden skal skalere med browseren med 3 kolonner i bredden. Jeg har tenkt til å gjøre den responsiv slik du sier med media queries etter hvert, men tar det senere. Jeg vil få ferdig mobilversjonen av siden først.

 

Jeg kan ikke lage galleriet med bakgrunnsbilder, så den løsning går nok ikke.

Endret av killertomato
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...