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

Question

我正在使用 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>

Answer 1

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

正如 Elnur Kurtaliev 在评论 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>