2

午後ずっとこれに苦しんでいたので、助けを求めようと思いました...

基本的に、私は次の構造を持っています：

<div id="gallery">

  <div class="product">
    <img ... />
    <div class="caption">
      <p>some text</p>
    </div>
  </div>

  <div class="product">
    <img ... />
    <div class="caption">
      <p>some text</p>
    </div>
  </div>

</div>

一言で言えば、私は次のことを達成したいと考えています。

  • 外側のコンテナー (div#gallery) は、ブラウザー ウィンドウ (高さ: 100%;) に合わせてスケーリングされます。
  • 画像は外側のコンテナ div#gallery (高さ: 100%; 幅: 自動;) に対して相対的に拡大縮小されるため、レスポンシブになります。
  • 各内部コンテナー (div.product) の幅は、その中に含まれる画像をしっかりと囲みます。
  • キャプション (div.caption) は、div.product に対して「絶対」に配置されます (透明な背景でオーバーレイされますが、それは重要ではありません)。

最初の試み: 次の CSS を単純に記述できます。

div#gallery {position: relative; height: 100%; ...}
img         {height: 100%; width: auto;}
div.caption {position: absolute; width: 100%; ...}

そうすれば、div.product は「静的」になり、画像は div#gallery に対して相対的に配置されます。残念ながら、div.caption が機能するには、div.product が「相対的」である必要があります。そう...

div#gallery {position: relative; height: 100%; ...}
div.product {position: relative;}
img         {height: 100%; width: auto;}
div.caption {position: absolute; width: 100%; ...}

うーん、div.caption は機能するようになりましたが、img の高さは div.product に相対的になり、スケーリングされません。それでは、追加しましょう...

div#gallery {position: relative; height: 100%; ...}
div.product {position: relative; height: 100%; width: auto;}
img         {height: 100%; width: auto;}
div.caption {position: absolute; width: 100%; ...}

これで本当にうまくいくはずですよね!? よくほとんど。まだ奇妙な点が 1 つあります。ブラウザーのサイズを変更すると、div.product の高さは当然のようにスケーリングされますが、幅は含まれる画像の元の幅に固定されたままです。

そして、これは私が立ち往生しているところです。何か案は？

事前にどうもありがとうございました！

編集: 2 つの提案に続いて、状況を示すjsFiddleがあります: http://jsfiddle.net/marccee/vx5DC/2/

4

1 に答える 1