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

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

1554 zobrazení
#bootstrap #html #css #programovani

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

 

 

 

Jak se ti článek líbil?

Podobné články

CSS Bootstrap - jak nastavit offset pro kotvu pod navbarem (anchor) CSS Bootstrap - jak nastavit offset pro kotvu pod navbarem (anchor) Migrace Bootstrap 4 na Bootstrap 5 Migrace Bootstrap 4 na Bootstrap 5 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) Bootstrap CSS - jak zabránit textu v přetékání elementu Bootstrap CSS - jak zabránit textu v přetékání elementu

Komentáře (6)

Zdeněk
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
Ahoj, nastav tomu bloku co to překrývá v CSS toto:

pointer-events: none;
Mlsoun
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
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
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
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"

Přidat komentář