Menu
I'm working on optimization on my page and it was all going smoothly since I came up with an idea to implement srcset and sizes attributes to my <img>. I create php function that constructs img object and fills srcset attribute with new scaled images (extra-1200w,large-992w,medium-786w,small-576w,extra_small-320w) and universal (as much as it can be done) sizes attribute (example below).
The problem starts occurs when I start using miscellaneous bootstrap grid system for different vw(view width), for example col-lg-4 col-md-6.
I tried many different versions of sizes but it didn't seem to work except one:
sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), 100vw"
this works, but for one grid - in this example .333 which is col-4. (12em is sidenav width).
But for more than one grid I tried this:
sizes="(max-width: 575.98px) 100vw,
((min-width: 576px) and (max-width: 767.98px)) 100vw,
((min-width: 768px) and (max-width: 991.98px)) calc(.5 * 100vw),
((min-width: 992px) and (max-width: 1199.98px)) calc(.333 * 100vw),
((min-width: 1200px) and (max-width: 1440.98px)) calc(.333 * 100vw),
(min-width: 1441px) calc(.333 * (100vw - 12em)),
100vw"
and for some reason, it always displays image with "extra" size.
An example below. it's the middle one. Every image is signed by its own size.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<body class="fixed-sn mdb-skin-custom customize-support" data-spy="scroll" data-target="#scrollspy" data-offset="15" data-gr-c-s-loaded="true">
<main>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<!-- Section: Page content -->
<section>
<!--Section: Basic resources-->
<section class="text-center">
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-lg-4 col-md-12 mb-4">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/bf-tutorial.jpg" class="img-fluid" alt="">
<a id="home-resources-automation-img" href="#">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Lorem ipsum</h4>
<!--Text-->
<p>
<strong>Lorem ipsum</strong> dolor sit amet.
</p>
<a id="home-resources-automation-button" href="#" target="_blank" class="btn btn-dtc btn-md waves-effect waves-light">Learn more</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<!-- <img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap.jpg" class="img-fluid" alt="MDB Bootstrap tutorial"> -->
<img src="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap.jpg" srcset="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-extra.jpg 1200w, https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-large.jpg 992w, https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-medium.jpg 768w, https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-small.jpg 576w, https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-extra-small.jpg 320w" sizes="(max-width: 575.98px) 100vw,
((min-width: 576px) and (max-width: 767.98px)) 100vw,
((min-width: 768px) and (max-width: 991.98px)) calc(.5 * 100vw),
((min-width: 992px) and (max-width: 1199.98px)) calc(.333 * 100vw),
((min-width: 1200px) and (max-width: 1440.98px)) calc(.333 * 100vw),
((min-width: 1441px) and (min-width: 36em)) calc(.333 * (100vw - 12em)),
100vw" alt="MDB Bootstrap tutorial" class="img-fluid"> <a id="home-resources-tutorial-img" href="#">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Lorem ipsum</h4>
<!--Text-->
<p class="card-text">Lorem ipsum dolor sit amet.
</p>
<a id="home-resources-tutorial-button" href="#" target="_blank" class="btn btn-dtc btn-md waves-effect waves-light">Start</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-lg-4 col-md-6 mb-4">
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Mockups/Horizontal/6-col/bf-tutorial.jpg" class="img-fluid" alt="">
<a id="home-resources-automation-img" href="#">
<div class="mask waves-effect waves-light"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--Title-->
<h4 class="card-title">Lorem ipsum</h4>
<!--Text-->
<p>
<strong>Lorem ipsum</strong> dolor sit amet.
</p>
<a id="home-resources-automation-button" href="#" target="_blank" class="btn btn-dtc btn-md waves-effect waves-light">Learn more</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
</section>
</section>
<!-- Section: Page content -->
</div>
</div>
</div>
</main>
<!--Main layout-->
</body>my goal is to increase size proportionally to image width.
Any idea why this won't work? Thanks in advance.
example that works for one breakpoint
EDIT.
pay attention to the fact that the smaller side does not mean that the photo should be smaller
702
As explained in this answer using (and here) img "sizes" leaves it up to the browser to decide which image to use. It's simply a way to "suggest" images, but the browser may or may not because of caching and other factors.
To consistently load images based on Bootstrap 4 breakpoints you'll want to use a <picture>...
<picture>
<source srcset="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-extra.jpg" media="(min-width: 1200px)" />
<source srcset="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-large.jpg" media="(min-width: 992px)" />
<source srcset="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-medium.jpg " media="(min-width: 768px)" />
<source srcset="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-small.jpg" media="(min-width: 576px)" />
<img src="https://acc02.mdbootstrap.com/img/Mockups/Horizontal/6-col/bootstrap-extra-small.jpg" class="img-fluid" />
</picture>
Demo: https://www.codeply.com/go/WbIpdEEFO6
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
