Bootstrap响应断点的大小属性

Question

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> . 我正在我的页面上进行优化，这一切都很顺利，因为我想出了一个实现srcset和sizes属性到我的<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). 我创建了php函数，用于构造img对象并使用新的缩放图像（extra-1200w，large-992w，medium-786w，small-576w，extra_small-320w）填充srcset属性并通用（尽可能多） sizes属性（以下示例）。 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 . 当我开始为不同的vw （视图宽度）使用其他引导网格系统时，问题开始出现，例如col-lg-4 col-md-6 。 I tried many different versions of sizes but it didn't seem to work except one: 我尝试了许多不同版本的sizes但除了一个外似乎没有用：

sizes="(min-width: 36em) calc(.333 * (100vw - 12em)), 100vw"

this works, but for one grid - in this example .333 which is col-4 . 这是有效的，但是对于一个网格 - 在这个例子中.333是col-4 。 ( 12em is sidenav width). （ 12em是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 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-cs-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 注意这一事实，即较小的一面并不意味着照片应该更小

Answer 1

As explained in this answer using (and here ) img "sizes" leaves it up to the browser to decide which image to use. 正如在这个答案中所解释的，使用（和这里）img“sizes”会让浏览器决定使用哪个图像。 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> ... 要始终 根据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>

Demo: https://www.codeply.com/go/WbIpdEEFO6 演示： https ： //www.codeply.com/go/WbIpdEEFO6

Bootstrap响应断点的大小属性

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-03-19 12:58:08

Bootstrap响应断点的大小属性

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-03-19 12:58:08

解决方案1
2 已采纳 2018-03-19 12:58:08