0

画面の中央に画像を表示しようとしていますが、水平方向に引き延ばしたいと考えています。ここでの秘訣は、マージンを設定する必要があるということです。例として 200px を使用します。

ウィンドウのサイズに関係なく、これらの余白を維持するには、画像を水平方向に引き伸ばす必要があります (場合によっては、比例して拡大縮小することもできます)。

センタリングとストレッチはできますが、なぜか同時にできません。

また、これは CSS のみである必要があります。JSはありません。

どんな助けでも大歓迎です！:D

PSウィンドウサイズで画像をスケーリングすることについて多くの質問を見てきましたが、これは同じことではありません。それらの間の画像が水平方向に伸びている間、一定のままであるマージンをピクセル単位で設定する必要があります。

4

3 に答える 3

1

マージンを保持するコンテナを画像の周りに配置しました。ウィンドウの幅が変更されても、マージンはそのままで、幅だけ.containerが変更されます。コンテナー内の画像の幅を 100% に設定すると、画像全体がコンテナーの幅に基づいて (比例して) スケーリングされます。

CSS:

.container {
    margin: 0 200px;
    background: red;
}

.container img {
    width: 100%;
}

HTML:

<div class="container">
    <img src="http://www.aviationnews.eu/blog/wp-content/uploads/2012/07/Olympic-Rings.png" />
</div>
于 2012-08-02T22:05:46.120 に答える
0

You could use two divs, the outer with the set margins, the inner with width set to 100%:

http://jsfiddle.net/tqmrY/4/

<div id="holder">
    <div></div>
</div>​

#holder {
    background: #333;
    height: 100px;
    margin: 0 100px;
}
#holder div {
        width: 100%;

}
​
于 2012-08-02T22:02:02.950 に答える
0

これを行う 1 つの方法は、画像を div に配置してから、div にパディングを配置することです。

img の幅が 100% で高さが自動になるように設定し、それを含む div にパディングを配置します。

ここに例があります

http://jsfiddle.net/uJnmf/

于 2012-08-02T22:03:55.647 に答える