Sitat av
Nikon01
Det skal være 3 bilder øverst, så 2 nederst. Disse skal ha forskjellig bredde for å matche totalbredden på siden og forskjellig høyde.
Det er aldri en god idé å si "det skal være x antall i bredden". Det ser kanskje flott ut å ha 3+2 i bredden på den skjermen du bruker akkurat nå, men jeg har en mobiltelefon med kjempesmal skjerm, så jeg vil ikke ha 3 i bredden.
Du kan ordne et slikt system med flexboxer. Selv ville jeg brukt Bootstrap, fordi det gjør prosessen mye enklere når du skal ha ulike breakpoints (og det
skal du ha. Ikke kjør 3 i bredden uansett skjermstørrelse.)
Her er et kjapt eksempel:
Kode
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<style>
body {
background-color: rgba(0, 0, 0, 1);
}
img {
max-width: 100%;
max-height: 400px;
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row justify-content-center text-center">
<div class="col-md-4 col-sm-6 pt-2">
<img src="https://i.imgur.com/BF3ty6o.jpg">
</div>
<div class="col-md-4 col-sm-6 pt-2">
<img src="https://i.imgur.com/x9PKSpj.png">
</div>
<div class="col-md-4 col-sm-6 pt-2">
<img src="https://i.imgur.com/FwnpMqO.jpg">
</div>
<div class="col-md-4 col-sm-6 pt-2">
<img src="https://i.imgur.com/8tcxHWh.jpg">
</div>
<div class="col-md-4 col-sm-6 pt-2">
<img src="https://i.imgur.com/tCUq2GJ.jpg">
</div>
</div>
</div>
</body>
</html>
Dette er en side som importerer Bootstrap, og definerer en enkel grid. På store skjermer ser vi 3+2. På SM (små tablets) ser vi 2+2+1 og på mobil har vi 1+1+1+1+1. Bootstraps flexboxer sørger for at hver kolonne fyller ut plassen på skjermen jevnt, og justify-content-center sørger for at kolonnene som er mindre enn skjermen blir sentrerte. text-center sørger for at bildene blir sentrerte inni hver flexbox. Jeg har også satt regler for at img-elementer ikke skal oppta mer enn 100% av tilgjengelig bredde, som gjør at bildene, hvis de er store nok, vil fylle flexboxen de står i. De har også en max-height for å unngå at de opptar urimelig mye høyde.