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

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

Komentáře

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

Související obsah

bootstrap

html

css

programovani

Reference

Podívejte se na naše reference

Prohlédnout

Aplikace

Podívejte se na naše aplikace

Prohlédnout

Co umíme?

Podívejte se co umíme

Prohlédnout

Co umíme?

Vytváříme sofistikované aplikace pro náročné

Od webových aplikací přes android až po převodové můstky či složité informační systémy.

Podívejte se k nám

Máte ještě čas? Podívejte se na další rubriky

Tento web používá soubory cookie. Dalším procházením tohoto webu vyjadřujete souhlas s jejich používáním.. Více informací zde.