Bootstrap, CSS a Media Query - proporcionální změna velikosti obrázku dle breakpointu

Bootstrap, CSS a Media Query - proporcionální změna velikosti obrázku dle breakpointu

Mějme nějaký html kód, kde používáme Boostrap (i když to zde není nutné) a své CSS styly. V divu s col mějme obrázek a jeho velikost potřebujeme měnit na základě rozlišení obrazovky. Jak na to pomocí media query, když navíc nechceme ručně přepočítávat pixely?

 

Html

<div class="col-lg-6 my-auto" >
<img src="image.jpg" alt="img" class="book-img" />
</div>

 

CSS - proporcionální změna velikosti obrázku dle breakpointu

@media (min-width: 1100px) {
.book-img {
max-width: calc(1000px - 60%) !important; /* Snížení o 60% */
max-height: calc(841px - 60%) !important; /* Snížení o 60% */
}
}
@media (min-width: 1330px) {
.book-img {
max-width: calc(1000px - 30%) !important; /* Snížení o 30% */
max-height: calc(841px - 30%) !important; /* Snížení o 30% */
}
}
@media (min-width: 1600px) {
.book-img {
max-width: 1000px !important;
max-height: 841px !important;
}
}

 

Co se stane při zpracování?

  • při rozlišení > 1600 px se zobrazí obrázek ve velikosti 1000x841 px
  • při rozlišení > 1330 px se zobrazí obrázek ve změnšené velikosti 1000x841 px o 30%
  • při rozlišení > 1100 px se zobrazí obrázek ve změnšené velikosti 1000x841 px o 60%
  • při rozlišení < 1331 px se zobrazí obrázek v plné velikosti dle displeje

 

 

 

Komentáře

Vaše reakce na Bootstrap, CSS a Media Query - proporcionální změna velikosti obrázku dle breakpointu
Zdeněk
#1889

12.03.2024 [1]
Ahoj, mám v html div blok s position-absolute a s img. A tento blok překrývá tlačítko, na které nejde kliknout, co s tím? Díky
OL3G
#1890

12.03.2024 [2]
Ahoj, nastav tomu bloku co to překrývá v CSS toto:

pointer-events: none;
Mlsoun
#1893

19.03.2024 [3]
Ahoj, používám bootstrap 5 a mám hamburger menu

<ul>
<li><a href="http://localhost/internet/"> Internet </a></li>
<li><a href="http://localhost/televize/"> Televize </a></li>
<li><a href="http://localhost/volani/"> Volání </a></li>
<li><a href="http://localhost/podporujeme/"> Podporujeme </a></li>
<li><a href="http://localhost/kontakt/"> Kontakt </a></li>
</ul>

a já bych chtěl, aby se na desktopu zobrazovaly jen nějaké odkazy a na mobilu všechny. jak to udělat? Díky
Ophin
#1894

01.04.2024 [4]
Ahoj, pomocí bootstrap 5 to skrývání odkazů můžeš udělat pomocí d-lg-none takto:

<ul>
<li class="d-lg-none"><a href="http://localhost/internet/"> Internet </a></li>
<li class="d-lg-none"><a href="http://localhost/televize/"> Televize </a></li>
<li class="d-lg-none"><a href="http://localhost/volani/"> Volání </a></li>
<li><a href="http://localhost/podporujeme/"> Podporujeme </a></li>
<li><a href="http://localhost/kontakt/"> Kontakt </a></li>
</ul>

Tzn. na breakpointu lg se první tři odkazy nezobrazí
Mathilda
#1903

18.04.2024 [5]
Ahoj, doporučil by mně někdo nějaké weby, kde si můžu stáhnout nějaké fotky a pak je dát bez strachu na svůj web?




Raven
#1908

28.04.2024 [6]
Poslední komentář
Ahoj Mathildo,

zkus fotky/obrázky vybrat na webech, kde by měly být teoreticky fotky zdarma a bez licence např.:

lifeofpix.com
stocksnap.io
pexels.com

Připadně pak AI, který ti vygeneruje obrázky dle tebe - vygoogli si "Free AI image generator"

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.