0

Bootstrap メディア オブジェクトを使用していますが、s を使用すると壊れているようですsrcset。

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

1 に答える 1

0

これは、バグ 1149357 - srcset イメージに幅と高さを設定しないと、祖先のシュリンク ラッピングの幅が正しくないことが原因です。

Elnur Kurtaliev がコメント 17widthで提案しているように、明示的な属性を に追加する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>
于 2016-03-15T09:51:36.197 に答える