我正在我的网页上进行优化工作，这一切都很顺利，因为我想出了一个实现srcset和sizes属性到我的<img>的想法。我创建了php函数来构造img对象并用新的缩放图像填充srcset属性（额外1200w，大992w，中786w，小-576w，extra_small-320w）和通用（尽可能多）sizes属性（下面的示例）。
当我开始使用其他vw（视图宽度）的杂项bootstrap grid system时，问题就会出现，例如col-lg-4 col-md-6。
我尝试了许多不同版本的sizes但除了一个之外它似乎没有用：
sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), 100vw"
这适用于一个网格 - 在此示例.333中为col-4。 （12em是sidenav width）。
但是对于多个网格，我尝试了这个：
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"
由于某种原因，它总是显示图像＆＃34;额外＆＃34;大小
以下示例。它是中间的。每张图片都按照自己的尺寸签名。
<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>
我的目标是按比例增加图像宽度。
知道为什么这不起作用？ 提前谢谢。
example that works for one breakpoint
EDIT。
注意这一事实，即较小的一面并不意味着照片应该更小
答案 0 :(得分：2)
explained in this answer使用（和here）img“sizes”会将其留给浏览器来决定使用哪个图像。它只是一种“建议”图像的方式，但由于缓存和其他因素，浏览器可能会也可能不会。
要始终 根据Bootstrap 4断点加载图片，您需要使用fputs ...
<picture>