0

レスポンシブの子画像が設定する高さを親 div に継承させようとしていますが、うまくいきません。

これはレスポンシブ Web サイト用であるため、ブラウザーのサイズを変更すると、画像のサイズも変更されます。問題は、親の .mosaic-block-three 要素に高さを設定すると、画像がその高さに固定されたままに見えることです。

.mosaic-block-three 要素を height: auto に設定すると、完全に失敗し、高さが 0 になります。

このスケールをスムーズにするために欠けているものは何ですか? css、html、またはjavascriptを再配置して追加できます。それを完了するために必要なことは何でもできます。何時間も試してみたので、どんな助けも大歓迎です:-)

サンプルページはこちら: http://bit.ly/KzfN2g

私の目標は、このページで画像が完全に応答する方法を再現することですが、ロールオーバー モザイク テキストを追加することです: http://bit.ly/LIrJv7

<div class="mosaic-block-three magnifier2">
     <a href="/wp-content/uploads/2012/05/home-office-vignette-tiered-architella-shades-01.png" class="mosaic-overlay fancybox" rel="gallery" style="display: inline; opacity: 0; "> </a>
     <div class="details"> 

        <a class="pf_title_link" href="/portfolio/vignette-tiered-architella-shades/">Vignette® Tiered™ Architella® Shades  </a> </div>

        <div class="mosaic-backdrop" style="display: block; ">
        <img src="/wp-content/uploads/2012/05/home-office-vignette-tiered-architella-shades-01-1024x564.png" class="attachment-large wp-post-image" alt="home-office-vignette-tiered-architella-shades-01" title="home-office-vignette-tiered-architella-shades-01"> 
        </div>
          <!-- end mosaic-backdrop --> 

     </div>
4

2 に答える 2

1

これは、これらのいくつかのCSSの変更で機能しています（Chromeでのみテスト済み）。

mosaic.css行46

.mosaic-block-three {高さ：250px }

mosaic.css行74

.mosaic-背景{位置：絶対}

Promotion.css行92

.details {マージン：15px 20px; マージン：0 20px;}

responsepress.css行155

.mosaic-backdrop img {float：left}

border-radius:5pxをimgに移動することもできます。

于 2012-05-31T23:28:06.953 に答える
0

背景の代わりに img タグを使用する必要があります。次に、その画像の最大幅を設定します。親要素に幅/高さを設定しないでください。

それはうまくいくはずです！

于 2012-05-31T09:28:53.853 に答える