Médias responsives

Images fluides, conteneurs vidéo 16:9 et blocs à ratio fixe pour photos ou cartes médiatiques.

Image responsive

bj-responsive-img - max-width: 100%, hauteur automatique, affichage bloc.

Exemple d’image décorative
<img class="bj-responsive-img" src="…" width="800" height="400" alt="…">

Vidéo responsive

bj-responsive-vid conserve un ratio 16:9 ; placez iframe ou video comme enfant direct.

<div class="bj-responsive-vid">
  <iframe src="…" title="…"></iframe>
</div>

Ratios d’aspect

Conteneur bj-ratio + modificateur (bj-ratio-16x9, bj-ratio-4x3, bj-ratio-1x1, bj-ratio-3x2). L’enfant direct remplit la zone avec object-fit: cover.

16:9

1:1

<div class="bj-ratio bj-ratio-4x3">
  <img src="…" alt="…">
</div>