Если вы просматриваете фрагмент (всю страницу) на экране 1200 пикселей или шире, тогда 4 изображения имеют ширину 255 пикселей.
Атрибут соответствующих размеров:
sizes="(min-width: 1200px) 255px, 25vw"
Соответствующий атрибут 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 на 540 пикселей, так как это самое маленькое изображение, котороебольше 255 пикселей.Однако Edge загружает изображение размером 150 на 150 пикселей, которое затем масштабируется до 255 пикселей и выглядит размытым.
Почему Edge выбирает это изображение?Это просто потому, что 150 ближе к 255, чем 540?Есть ли способ заставить его выбрать 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>