Responsiva element med bibehållna proportioner

13-06-2017

Att få dina responsiva element att skala och bete sig ungefär som bilder kan vara lite av en huvudverk, så hur sätter man egentligen höjden proportionellt mot bredden?

Här kommer en enkel lösning på hur du löser detta och får dina element att skala proportionerligt, utan att behöva krångla till det med Javascript.

CSS

.container {
    position: relative;
    width: 25%;
    padding-bottom: 25%;
    height: 0;
}
 
.content {
    width: 100%;
    height: 100%;
    position: absolute;
}

HTML

<div class="container">
    <div class="content"></div>
</div>

Varför fungerar det?

Den här lösningen fungerar därför att padding i procent alltid räknas utifrån bredden. Med detta enkla knep kan du därför sätta en höjd som är relativ till bredden på elementet.

Enkelt!

Blog