8

2 つの画像があります。1 つはメイン画像で、もう 1 つはメイン画像の上に配置したい額縁のようなものです。額縁の画像は、中央が透明な png で、メインの画像が透けて見えます。

画像の寸法は重要です。内側のメイン画像はフレームよりも小さくする必要があるため、中央からしか見えません。

メイン.jpg = 367 x 550

フレーム.png = 405 x 597

私は次のコードでそれを持っていると思った...

<div style="background-image:url('/main.jpg') no-repeat scroll center center transparent;">
<img style="width:100%; max-width:100%;" src="/frame.png">
</div>

...これは、携帯電話で画面が表示されるまではうまく機能します。幅を 100% に指定したため、frame.png は伸びますが、背景の main.jpg はそれに合わせて伸びません。

デザインは流動的である必要があるため、画像を引き伸ばす必要があります。

背景がメイン画像と同じように伸びるようにする方法はありますか?

これを機能させるためにあらゆる種類の方法を試しました。フレームをメイン画像の上に浮かぶ div に絶対に配置するなどしましたが、それを行ったときにメイン画像を水平方向と垂直方向の中央に表示することができませんでした。

JavaScriptに頼らずに、私が望むものを達成する方法はありますか?

ところで、2 つの画像を使用している理由は、ファイル サイズのためです。小さく保つためにメイン画像をjpgにする必要がありますが、フレームの透明度も必要なので、pngにする必要があります:(

4

4 に答える 4

17

私は通常これを使用します：

HTML:

<div id="frame">
    <img id="myImg" src="main.jpg">
</div>

CSS:

#frame {
    position: relative;

    width: 597px;
    height: 405px;

    background-image: url(frame.png);
    background-position: center;
    background-size: cover; }

#myImg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;

    display: block;
    margin: auto; }

これは、サイズが固定されているか、max-width と max-height が設定されているすべての画像とその他の要素で機能します。

これがうまくいくことを願っています:)

于 2013-09-01T12:26:38.640 に答える
3

私は通常、背景として絶対配置された別の画像を使用します。お気に入り：

<div>
<img class="background-img" width="100%" height="100%" style="position:absolute; top:0; left:0">
<img class="second-img" width="100%" height="100%" /> 
<!-- Then do the positioning with classes -->
</div>

試してみてください。希望どおりに機能することを願っています

于 2013-09-01T07:21:55.837 に答える
0

画像を絶対として設定した場合。コンテナから持ち上げます。

フローティングでも同じことができます。

z-index:1; はどうでしょうか。および x-index:2; マージンあり:自動; ?

于 2013-09-01T09:00:49.257 に答える