Question

我正在使用Bootstrap媒体对象，但是当我使用srcset时它们似乎正在破坏。

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

当我删除开发工具中的srcset属性时，它将解决问题。以下屏幕截图中的工作对象未使用srcset。

BROKEN

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

<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

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

作为库格尔塔利耶夫在Comment 17建议你是否可以在width上添加明确的img属性，或者用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>

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

1 个答案: