1 kuva

3 kuvaa

2 kuvaa

Sivun alkuun head-tagien sisään:

    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.0.js"></script>

CSS-määrittelyihin:

.kuvagalleria {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    overflow:hidden;
}
/*Näistä voit muutella korkeuksia ja marginia oman maun mukaan.*/
.kuva {height:200px;text-align:center;margin:.5em;}
.kuva.kaksikuvaa {height:300px;}
.kuva.yksikuva {height:400px;}

.kuva img {height:100%;flex-basis:25%;flex-grow:1; flex-shrink:1;}

Siihen kohtaan html-sivua johon haluat gallerian:

    <div class="kuvagalleria" id="gallu1">
    <div class="kuva"><a href="linkkikuvaan"><img src="kuvanosoite.jpg" alt=""></a></div>
</div>
    

Sivun loppuun ennen </body>-tagia

    <script>
var funktio = function kuvienKoko(){
    var kuvia = document.getElementById("gallu1").children.length;
    if (kuvia<=1){ 
        $('#gallu1 > .kuva').addClass("yksikuva");
    } else if (kuvia>1 && kuvia<=2) {
            $('#gallu1 > .kuva').addClass("kaksikuvaa");
    } else {
        return false;
        
    }
};
funktio();
</script>