Bootstrap 个响应断点的大小属性

Question

我正在优化我的页面，一切都很顺利，因为我想到了为我的 <img> 实现 srcset 和 sizes 属性的想法。我创建 php 函数构造 img 对象并用新的缩放图像填充 srcset 属性（extra-1200w、large-992w、medium-786w、small-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 宽度）。

但是对于不止一个网格我试过这个：

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"

并且出于某种原因，它总是显示 "extra" 大小的图像。

下面是一个例子。这是中间的。每张图片都有自己的尺寸。

<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

编辑。

注意边小并不代表照片要小

Answer 1

As explained in this answer using (and here) img "sizes" 让浏览器决定使用哪个图像。这只是 "suggest" 图片的一种方式，但浏览器可能会或可能不会，因为缓存和其他因素。

要始终 根据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>

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

Bootstrap 个响应断点的大小属性

Sizes attribute for Bootstrap responsive breakpoints

html

media-queries

twitter-bootstrap

srcset

bootstrap-4