1

CSS を使用して、キャプション オーバーレイを中央に配置した画像を表示しようとしています。また、ブラウザー ウィンドウが小さすぎる (縮小して収まらない) 場合はリキッド機能を使用します。

私の現在の最善の試みは、次の HTML のようになります (サンプル画像として Google のロゴを使用)

<div align="center">
   <div class="container">
      <img src="http://www.google.fr/images/logos/ps_logo2.png" class="picture" />
      <h3 class="caption">Image Caption</h3>
   </div>
</div>

次のCSSで

.container {
   position : relative;
   max-width : 364px;
}
.picture {
    border-radius:0.5em;
    box-shadow: 0px 0px 0.5em #000000;
    max-width:364px;
}
.caption {
    position:absolute;
    padding:0.25em;
    top:1em; left:0; right:0;
    color:black;
    background-color:rgba(0,0,0,0.2);
    text-align:center;
}

ただし、大きなブラウザ ウィンドウに合わせて中央に配置したい場合は、小さなブラウザ ウィンドウでは縮小しません... また、IE のサポートは必要ありません。WebKit 固有 (iPhone/Android) で十分です。 、可能であれば JavaScript は避けたいと考えています。

バージョンhttp://jsfiddle.net/kWH3C/1/ですぐに遊べる JSFiddle

4

1 に答える 1

5

画像ではなくコンテナに max-width を設定し、画像をwidth:100%

http://jsfiddle.net/Madmartigan/kWH3C/5/

<div class="container">
    <img src="http://www.google.fr/images/logos/ps_logo2.png" class="picture" />
    <h3 class="caption">Image Caption</h3>
</div>

.container {
    position : relative;
    max-width : 364px;
    margin:0 auto;
}
.picture {
    border-radius:0.5em;
    box-shadow: 0px 0px 0.5em #000000;
    width:100%;
}
.caption {
    position:absolute;
    padding:0.25em;
    top:1em; left:0; right:0;
    color:black;
    background-color:rgba(0,0,0,0.2);
    text-align:center;
}

外側の div は必要align="center"なく、HTML5 では非推奨です。配置と配置には CSS を使用してください。

于 2011-04-27T13:08:49.753 に答える