2

これは私の最初の質問です。私が何か間違ったことをしているとは思いません。具体的なことなので、私はギャラリーを作ろうとしています。このギャラリーにはページがあり、それぞれにキャプションがあります。表示する必要があります16:9 の比率の画像と、長さに関係なくキャプションが表示されます。

現時点では、キャプションを表示できますが、ブラウザーのサイズを小さなブレークポイントに変更すると、キャプションが長すぎると壊れてしまいます (キャプションは表示されますが、キャプションが長すぎると画像が表示されない可能性があります)。

それが私が今探している解決策です。例としてjsfiddleを残します。可能な限り簡単にしようとしたので、醜い矢印などを見ないでください:P.

フィドル: http://jsfiddle.net/Vb7bP/5/

これに対する醜い修正は、ここで padding-bottom を変更することです:

.galleryContainer {
    padding-bottom: 56.25%; // This is for the image to respect a 16:9 aspect ratio.
}

しかし、キャプションが長すぎたり短すぎたりするとうまくいかず、16:9 の比率が失われる可能性があります。

キャプション css は問題ないと思います。絶対として div の下部に配置されています。

.galleryCaptionWrapper {
    background: #ccc;
    width: 100%;
    position: absolute;
    padding: 25px;
    z-index: 3;
    bottom: 0;
}

質問が間違っている場合は申し訳ありません。ありがとう！

4

1 に答える 1

3

これはあなたが探しているものですか？

http://jsfiddle.net/Vb7bP/3/

必要のない多くのことについて、あなたは絶対的なポジショニングを持っていたと思います。関連するcssはここにあります：

.galleryImageWrapper {
    background-color: #000;
    width: 100%;
    padding-bottom: 56%;
    position: relative;
}
.galleryImageWrapper img {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
}

私自身も同様の質問がありました：

CSSで幅+定数に比例するオブジェクト要素の高さをスケーリングする

画像の後にキャプションを表示するために特別なことをする必要はありません。これは、ブロック要素の標準的な動作です。

于 2013-03-07T21:41:42.620 に答える