我正在优化我的页面，自从我想出实现 srcset 的想法后，一切进展顺利。和 sizes我的 <img> 的属性.我创建 php构造 img 的函数对象和填充 srcset具有新缩放图像(extra-1200w、large-992w、medium-786w、small-576w、extra_small-320w)和通用(尽可能多)的属性sizes属性(如下示例)。
当我开始使用其他 bootstrap grid system 时，问题开始出现对于不同的 vw ( View 宽度)，例如 col-lg-4 col-md-6 .
我尝试了很多不同版本的 sizes但它似乎没有工作，除了一个:
sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), 100vw"
这可行，但对于一个网格 - 在本例中为 .333这是 col-4 . (12em 是 sidenav 宽度)。
但是对于不止一个网格我试过这个:
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>我的目标是根据图像宽度按比例增加尺寸。
知道为什么这行不通吗？ 提前致谢。
example that works for one breakpoint
编辑。
注意边小并不代表照片要小
最佳答案
由于 explained in this answer 使用(和 here )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>
关于html - Bootstrap 响应断点的大小属性，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49362289/