1

私はこれまでに持っていること、そして私が達成しようとしていることの簡単な例を作成しました。

ここで私のデモを参照してください

私のjsfiddleには、「content-wrap」という名前のラッピングdivが表示されます。このdiv内で、ウィンドウサイズとコンテンツに拡大できる画像が必要です。

私は以前に背景画像のストレッチを行ったことがあります：ここの例を参照してください

ただし、これはサイト内の特定の地域向けであるため、もう少し複雑です。

私はこれまで、上記のリンクから既存のコードを試してみましたが、別のアプローチを取る必要があるかもしれません。下にスクロールすると、画像が所定の位置に留まらないため、スクロールバーとともに移動します（必要に応じて）。

何か案は？

4

2 に答える 2

1

background-sizeCSS3 のプロパティを使用してもかまわない場合は、 #content-wrap {CSS ステートメントに次の追加を行うと、コンテナーのサイズに合わせて拡張される応答性の高い背景画像が実現されます。

#content-wrap {
    height: 1000px;
    background: #ccc;
    color: #fff;

    /* Added CSS */

    display: block;
    max-width: 100%;
    clear: both;
    background: transparent url("http://placekitten.com/900/900") top right no-repeat;
    background-size: cover;
}

これは、追加された CSS といくつかの素敵なプレースキットを使用した jsfiddle の更新バージョンです: http://jsfiddle.net/kztGj/22/

もちろん、これの欠点は、Internet Explorer < 9、Firefox 3.6、または CSS3 をサポートしていないブラウザーでは機能しないことです。しかし、レスポンシブな画像が必要な場合は、古いブラウザーをサポートするエレガントなソリューションを見つけるのに苦労することになります。

プロパティとその用途の詳細については、非常に有益なこの記事background-sizeをチェックすることをお勧めします。

于 2012-08-15T04:18:26.967 に答える
0

画像に、このようなcssを追加します

.custom-image {
    width:100%;
}

そしてあなたのhtml 

<div>
    <img src="" class="custom-image" />
</div>
于 2012-08-31T09:55:59.467 に答える