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

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