Bootstrap - zobrazit různý obrázek dle rozlišení / dle break point (Responsive breakpoints)

Ahoj.

používám bootstrap 4 a potřeboval bych změnit obrázek na základě rozlišení / zařízení / dle break point. Zkusil jsem to pomocí "Display property", ale nefunguje to jak chci:

Cílem je, že při malém rozlišení chci zobrazit obrázek y.png a při větším rozlišení chci obrázek x.png (break point lg+xl).

Díky

ODPOVĚĎ

Ahoj,

je jedno zda tam máš přímo bootstrap 4, stačí si nadefinovat třídu v css dle bootstrap break point, takto se ti obrázek y zobrazí na velkém rozlišení (od min-width: 992px) a obrázek x při menším rozlišení (do max-width: 991.98px).

HTML

CSS

@media (min-width: 992px) {
.img-break-lg {
display: block;
}
.img-break-md {
display: none;
}
}


@media (max-width: 991.98px) {
.img-break-lg {
display: none;
}
.img-break-md {
display: block;
}
}