Question

如果您在1200像素或更宽的屏幕上查看代码段（整页），则4张图片的宽度为255像素。

相关的srcset属性：

srcset="https://via.placeholder.com/540x540.jpg 540w,     
  https://via.placeholder.com/150x150.jpg 150w,     
  https://via.placeholder.com/768x768.jpg 768w, 
  https://via.placeholder.com/992x992.jpg 992w, 
  https://via.placeholder.com/1200x1200.jpg 1200w, 
  https://via.placeholder.com/1920x1920.jpg 1920w"

在Chrome上，加载的图像为540 x 540像素，因为这是大于255像素的最小图像。但是Edge会加载一张150px x 150px的图像，然后将其放大到255px，看起来很模糊。

为什么Edge选择此图像？仅仅是因为150比540更接近255？无论如何，它会选择540个吗？

img {
    height: auto;
    max-width: 100%;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-12 col-md-3">
      <picture><source media="(min-width: 768px)" srcset="https://via.placeholder.com/540x540.jpg 540w, https://via.placeholder.com/150x150.jpg 150w, https://via.placeholder.com/768x768.jpg 768w, https://via.placeholder.com/992x992.jpg 992w, https://via.placeholder.com/1200x1200.jpg 1200w, https://via.placeholder.com/1920x1920.jpg 1920w" sizes="(min-width: 1200px) 255px, 25vw"><source srcset="https://via.placeholder.com/540x405.jpg 540w, https://via.placeholder.com/768x576.jpg 768w, https://via.placeholder.com/992x744.jpg 992w, https://via.placeholder.com/1200x900.jpg 1200w, https://via.placeholder.com/1920x1440.jpg 1920w" sizes="(min-width: 576px) 510px, 100vw"><img srcset="https://via.placeholder.com/540x540.jpg 540w, https://via.placeholder.com/150x150.jpg 150w, https://via.placeholder.com/768x768.jpg 768w, https://via.placeholder.com/992x992.jpg 992w, https://via.placeholder.com/1200x1200.jpg 1200w, https://via.placeholder.com/1920x1920.jpg 1920w" sizes="(min-width: 1200px) 255px, 25vw" alt="" src="https://via.placeholder.com/1920x1920.jpg" width="1920" height="1920"></picture>
    </div>
    <div class="col-12 col-md-3">
      <picture><source media="(min-width: 768px)" srcset="https://via.placeholder.com/540x540.jpg 540w, https://via.placeholder.com/150x150.jpg 150w, https://via.placeholder.com/768x768.jpg 768w, https://via.placeholder.com/992x992.jpg 992w, https://via.placeholder.com/1200x1200.jpg 1200w, https://via.placeholder.com/1920x1920.jpg 1920w" sizes="(min-width: 1200px) 255px, 25vw"><source srcset="https://via.placeholder.com/540x405.jpg 540w, https://via.placeholder.com/768x576.jpg 768w, https://via.placeholder.com/992x744.jpg 992w, https://via.placeholder.com/1200x900.jpg 1200w, https://via.placeholder.com/1920x1440.jpg 1920w" sizes="(min-width: 576px) 510px, 100vw"><img srcset="https://via.placeholder.com/540x540.jpg 540w, https://via.placeholder.com/150x150.jpg 150w, https://via.placeholder.com/768x768.jpg 768w, https://via.placeholder.com/992x992.jpg 992w, https://via.placeholder.com/1200x1200.jpg 1200w, https://via.placeholder.com/1920x1920.jpg 1920w" sizes="(min-width: 1200px) 255px, 25vw" alt="" src="https://via.placeholder.com/1920x1920.jpg" width="1920" height="1920"></picture>
    </div>
    <div class="col-12 col-md-3">
      <picture><source media="(min-width: 768px)" srcset="https://via.placeholder.com/540x540.jpg 540w, https://via.placeholder.com/150x150.jpg 150w, https://via.placeholder.com/768x768.jpg 768w, https://via.placeholder.com/992x992.jpg 992w, https://via.placeholder.com/1200x1200.jpg 1200w, https://via.placeholder.com/1920x1920.jpg 1920w" sizes="(min-width: 1200px) 255px, 25vw"><source srcset="https://via.placeholder.com/540x405.jpg 540w, https://via.placeholder.com/768x576.jpg 768w, https://via.placeholder.com/992x744.jpg 992w, https://via.placeholder.com/1200x900.jpg 1200w, https://via.placeholder.com/1920x1440.jpg 1920w" sizes="(min-width: 576px) 510px, 100vw"><img srcset="https://via.placeholder.com/540x540.jpg 540w, https://via.placeholder.com/150x150.jpg 150w, https://via.placeholder.com/768x768.jpg 768w, https://via.placeholder.com/992x992.jpg 992w, https://via.placeholder.com/1200x1200.jpg 1200w, https://via.placeholder.com/1920x1920.jpg 1920w" sizes="(min-width: 1200px) 255px, 25vw" alt="" src="https://via.placeholder.com/1920x1920.jpg" width="1920" height="1920"></picture>
    </div>
    <div class="col-12 col-md-3">
      <picture><source media="(min-width: 768px)" srcset="https://via.placeholder.com/540x540.jpg 540w, https://via.placeholder.com/150x150.jpg 150w, https://via.placeholder.com/768x768.jpg 768w, https://via.placeholder.com/992x992.jpg 992w, https://via.placeholder.com/1200x1200.jpg 1200w, https://via.placeholder.com/1920x1920.jpg 1920w" sizes="(min-width: 1200px) 255px, 25vw"><source srcset="https://via.placeholder.com/540x405.jpg 540w, https://via.placeholder.com/768x576.jpg 768w, https://via.placeholder.com/992x744.jpg 992w, https://via.placeholder.com/1200x900.jpg 1200w, https://via.placeholder.com/1920x1440.jpg 1920w" sizes="(min-width: 576px) 510px, 100vw"><img srcset="https://via.placeholder.com/540x540.jpg 540w, https://via.placeholder.com/150x150.jpg 150w, https://via.placeholder.com/768x768.jpg 768w, https://via.placeholder.com/992x992.jpg 992w, https://via.placeholder.com/1200x1200.jpg 1200w, https://via.placeholder.com/1920x1920.jpg 1920w" sizes="(min-width: 1200px) 255px, 25vw" alt="" src="https://via.placeholder.com/1920x1920.jpg" width="1920" height="1920"></picture>
    </div>
  </div>
</div>

为什么Edge加载的图像比要求的要小？

0 个答案: