Bootstrap media object breaking when using srcset

Question

I am using Bootstrap media objects but they seem to be breaking when I use srcsets.

The media-body is offset to the right and with overflow: hidden it cannot be seen.

When I delete the srcset attribute in dev tools it will fix the problem. The working objects in the below screenshot are not using srcset.

BROKEN

EXPECTED (just ignore the last bath one)

<section class="row">
  <div class="col-lg-6">
    <div class="media media__offer">
      <a href="#">
        <img alt="" src="/heritageCastIron.jpg" srcset="/heritageCastIron.jpg 1x, /heritageCastIron@2x.jpg 2x" class="media-object" />
      </a>
      <div class="media-body">
        <div class="discounts">
          <p class="circle">save <span class="circle-percent">40%</span> off RRP</p>
        </div>
        <h3 class="media-heading"><a href="#">Cast iron baths</a></h3>
        <p class="upper">Special offer!</p>
        <p>RRP from &pound;1,900.00</p>
        <p>Now only:</p>
        <p class="pound">&pound;1215.00</p>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="media media__offer">
      <a href="/#" class="media-left">
        <img alt="" src="/Ice_5_Tap_hole_BSM.jpg" class="media-object" />
      </a>
      <div class="media-body">
        <div class="discounts">
          <p class="circle">save <span class="circle-percent">70%</span> off RRP</p>
        </div>
        <h3 class="media-heading"><a href="#">Ice 5 Tap Hole Bath Shower Mixer</a></h3>
        <p class="upper">Special offer!</p>
        <p>RRP: &pound;603.00</p>
        <p>Now only:</p>
        <p class="pound">&pound;180.90</p>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="media media__offer">
      <a href="#" class="media-left">
        <img alt="" src="/Caprieze_Basin_Mixer_TCC04.JPG" class="media-object" />
      </a>
      <div class="media-body">
        <div class="discounts">
          <p class="circle">save <span class="circle-percent">50%</span> off RRP</p>
        </div>
        <h3 class="media-heading"><a href="#">Caprieze Basin Mixer Tap</a></h3>
        <p class="upper">Special offer!</p>
        <p>RRP: &pound;126.26</p>
        <p>Now only:</p>
        <p class="pound">&pound;63.13</p>
      </div>
    </div>
  </div>
  <div class="col-lg-6">
    <div class="media media__offer">
      <a href="#" class="media-left">
        <img alt="" src="/BHAFSW00.jpg" srcset="/BHAFSW00.jpg 1x, /BHAFSW00@2x.jpg 2x" class="media-object" />
      </a>
      <div class="media-body">
        <div class="discounts">
          <p class="circle">save <span class="circle-percent">50%</span> off RRP</p>
        </div>
        <h3 class="media-heading"><a href="#">Hadleigh Freestanding Bath</a></h3>
        <p class="upper">Special offer!</p>
        <p>RRP: &pound;1,650.00</p>
        <p>Now only:</p>
        <p class="pound">&pound;825.00</p>
      </div>
    </div>
  </div>
</section>

Answer 1

This is caused by Bug 1149357 - Not setting a width and height on srcset image causes incorrect width for shrink-wrapping ancestor.

As Elnur Kurtaliev suggests in Comment 17 if you can you should add an explicit width attribute on the img, or set the width with css.

<div class="col-lg-6">
  <div class="media media__offer">
    <a href="#">
      <img  width="200" alt="" src="/heritageCastIron.jpg" srcset="/heritageCastIron.jpg 1x, /heritageCastIron@2x.jpg 2x" class="media-object" />
    </a>
    <div class="media-body">
      <div class="discounts">
        <p class="circle">save <span class="circle-percent">40%</span> off RRP</p>
      </div>
      <h3 class="media-heading"><a href="#">Cast iron baths</a></h3>
      <p class="upper">Special offer!</p>
      <p>RRP from &pound;1,900.00</p>
      <p>Now only:</p>
      <p class="pound">&pound;1215.00</p>
    </div>
  </div>
</div>