使用 srcset 时引导媒体对象中断答案

【问题标题】：Bootstrap media object breaking when using srcset使用 srcset 时引导媒体对象中断
【发布时间】：2016-03-14 17:33:00
【问题描述】：

我正在使用 Bootstrap 媒体对象，但当我使用 srcsets 时它们似乎会中断。

media-body 向右偏移，overflow: hidden 无法看到。

当我在开发工具中删除srcset 属性时，它会解决问题。下面截图中的工作对象没有使用srcset。

坏了

预期（忽略最后一次洗澡）

<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>

【问题讨论】：

标签： html css twitter-bootstrap srcset

【解决方案1】：

这是由 Bug 1149357 引起的 - 未在 srcset 图像上设置宽度和高度会导致收缩包装祖先的宽度不正确。

正如 Elnur Kurtaliev 在 Comment 17 中建议的那样，如果可以的话，您应该在 img 上添加一个显式的 width 属性，或者使用 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>

【讨论】：