I am working on optimization on my page, and everything went smoothly, since I came up with the srcset and sizes attributes for my <img> . I create a php function that builds an img object and populates the srcset attribute srcset new scaled images (extra-1200w, large-992w, medium-786w, small-576w, extra_small-320w) and the universal (as much as possible) sizes attribute (example below). The problem starts when I start using a different bootgrid system for different vw (view width), for example col-lg-4 col-md-6 . I tried many different versions of sizes , but didn't seem to work, except for one:
sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), 100vw"
this works, but for a single grid - in this example .333 , which is col-4 . ( 12em is the width of the sidenav).
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 an image with an extra size.
An example is below. this is average. Each image is signed in 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-cs-loaded="true"> <main> <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <section> <section class="text-center"> <div class="row"> <div class="col-lg-4 col-md-12 mb-4"> <div class="card"> <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> <div class="card-body"> <h4 class="card-title">Lorem ipsum</h4> <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> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="card"> <div class="view overlay hm-white-slight"> <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> <div class="card-body"> <h4 class="card-title">Lorem ipsum</h4> <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> </div> </div> <div class="col-lg-4 col-md-6 mb-4"> <div class="card"> <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> <div class="card-body"> <h4 class="card-title">Lorem ipsum</h4> <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> </div> </div> </div> </section> </section> </div> </div> </div> </main> </body>
My goal is to increase the size proportionally to the width of the image.
Any idea why this won't work? Thanks in advance.
example that works for one breakpoint
EDIT.
note that the smaller side does not mean that the photo should be smaller