Wit*_*zyk 5 html media-queries twitter-bootstrap srcset bootstrap-4
我正在我的页面上进行优化,这一切都很顺利,因为我想出了一个实现srcset和sizes属性的想法<img>.我使用新的缩放图像(额外的1200w,大型992w,中型786w,小型576w,extra_small-320w)创建php构造img对象和填充srcset属性的函数和通用(尽可能多的可用)sizes属性(下面的示例) .当开始使用杂发生启动问题引导网格系统对于不同的vw(视图宽度),例如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>我的目标是按比例增加图像宽度.
知道为什么这不起作用？提前致谢.
编辑.
注意这一事实,即较小的一面并不意味着照片应该更小
正如这个答案中所解释的，使用（以及此处）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>
演示： https: //www.codeply.com/go/WbIpdEEFO6
| 归档时间： |
|
| 查看次数： |
1675 次 |
| 最近记录： |