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:

< div class="col-md-4 col-sm-12 d-none d-lg-block d-xl-block">
< img src="x.png" class="img-fluid">
< /div>

< div class="col-md-4 col-sm-12 d-none d-xs-block d-sm-block d-md-block">
< img src="y.png" class="img-fluid">
< /div>

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

< div class="col-md-4 col-sm-12 img-break-lg">
< img src="y.png" class="img-fluid">
< /div>

< div class="col-md-4 col-sm-12 img-break-md">
< img src="x.png" class="img-fluid">
< /div>

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;
}
}

Show english version