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

Co nejvíce stručné řešení pro vývojáře a linux administrátory

Na superuser.cz nenaleznete žádný zbytečný obsah, vždy se jde přímo k věci, denně se zde objevují nové problémy a jejich řešení...

Začít používat

Bootstrap - zobrazit různý obrázek dle…

06.06.2020 napsal Uruq

Vyřešeno Bootstrap - show different image by resolution / by 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

The English language is translated by machine - the translator can modify eg cited codes = it is better to use codes from the Czech original.

Bootstrap - show different image by resolution / by break point (Responsive breakpoints)

Hello.

i am using bootstrap 4 and i would need to change the image based on the resolution / device. I tried it with "Display property", but it doesn't work the way I want:


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


The goal is that at low resolution I want to display the image y.png and at higher resolution I want the image x.png (break point lg + xl).

Thanks

Zobrazit odpovědi

Nejlépe hodnocení uživatelé
Hanz

Počet UP: 5142

React: 224

Rusty

Počet UP: 2365

React: 105

OL3G

Počet UP: 1651

React: 65

Strosmajer

Počet UP: 502

React: 31

Oxytocin

Počet UP: 303

React: 27

SYSTEM

Počet UP: 443

React: 27

Hyacint

Počet UP: 43

React: 22

Odpovědi na dotaz

RE: Bootstrap - zobrazit různý…

19.06.2020 odpověděl Rusty (update 19.06.2020)

Zkontrolováno

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

The English language is translated by machine - the translator can modify eg cited codes = it is better to use codes from the Czech original.

Bootstrap - show different image by resolution / by break point (Responsive breakpoints)

Hi,

it doesn't matter if you have bootstrap 4 directly there, you just need to define the class in css according to the bootstrap break point, this way the image y will be displayed at high resolution (from min-width: 992px) and the image x at lower resolution (up to max-width: 991.98 px).

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;
}
}
Tento web používá k poskytování služeb, personalizaci reklam a analýze návštěvnosti soubory cookie. Používáním tohoto webu s tím souhlasíte. Další informace