<h1>srcset with wrong size descriptor</h1>
<h2>Problem: Image (400px) doesn't fill container (300px) even if it's big enough (only appears with DPR >= 2):</h2>
<div class="container-300px">
  <p>300px</p>
  <img src="https://via.placeholder.com/300x150.png"
       srcset="https://via.placeholder.com/400x200.png 600w,
             https://via.placeholder.com/300x150.png 300w"
       sizes="300px"/>
</div>

<h2>Solution: Enforce width (300px) in CSS:</h2>
<div class="container-300px">
  <p>300px</p>
  <img src="https://via.placeholder.com/300x150.png"
       srcset="https://via.placeholder.com/400x200.png 600w,
               https://via.placeholder.com/300x150.png 300w"
       sizes="300px"
       class="img-300w"/>
</div>
.container-300px {
  width: 300px;
  height: auto;
  background-color: red;
}
.container-300px p {
  color: #fff;
  margin: 0;
  padding-top: 5px;
  padding-bottom: 5px;
  text-align: center;
}
img {
  /* Fix space below image. Source: https://stackoverflow.com/questions/10844205/html-5-strange-img-always-adds-3px-margin-at-bottom#comment14122249_10844318 */
  vertical-align: middle;
}
.img-300w {
  width: 300px;
  height: auto;
}
.line-300px {
  width: 300px;
  background-color: #efefef; 
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.