Атрибут размеров для адаптивных точек останова Bootstrap
Я работаю над оптимизацией на своей странице, и все шло гладко, так как у меня появилась идея реализовать srcset а также sizes атрибуты моего <img>, я создаю php функция, которая создает img объект и заливки srcset атрибут с новыми масштабированными изображениями (extra-1200w,large-992w,medium-786w,small-576w,extra_small-320w) и универсальный (настолько, насколько это возможно) sizes атрибут (пример ниже). Проблема начинается возникает, когда я начинаю использовать разные системы начальной загрузки сетки для разных vw (ширина просмотра), например col-lg-4 col-md-6, Я перепробовал много разных версий sizes но это не сработало, кроме одного:
sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), 100vw"
это работает, но для одной сетки - в этом примере .333 который col-4, (12em это ширина сиденав).
Но для более чем одной сетки я попробовал это:
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"
и по какой-то причине он всегда отображает изображение с "дополнительным" размером.
Пример ниже. это средний. Каждое изображение подписано своим собственным размером.
<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>Моя цель - увеличить размер пропорционально ширине изображения.
Есть идеи, почему это не сработает? Заранее спасибо.
пример, который работает для одной точки останова
РЕДАКТИРОВАТЬ.
обратите внимание на то, что меньшая сторона не означает, что фотография должна быть меньше
1 ответ
Как объяснено в этом ответе, использование (и здесь) img "размеры" оставляет браузеру решать, какое изображение использовать. Это просто способ "предложить" изображения, но браузер может или не может из-за кеширования и других факторов.
Чтобы последовательно загружать изображения на основе точек останова Bootstrap 4, вы должны использовать <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>