0

Web ページの途中で、ブラウザ ウィンドウの左端から右端まで広がる画像を表示したいと考えています。

ウィンドウのサイズが変更されると、画像は比例して縮小されますが、画像にテキストを表示する div があるため、画像の目に見える高さ、たとえば 200px が同じままである必要があります。「画像ウィンドウ」は、高さが固定された div を含むことによって保持されていると思います。

これを達成し、次のブラウザで動作させるにはどうすればよいですか: ie8+、Chrome20+、FF20?

4

2 に答える 2

0

ああ、これまで人気のあった「レスポンシブ イメージを作成するにはどうすればよいですか?」さて、あなたの原因では、画像に指定された高さを設定する以外は、通常どおりのビジネスです。

http://jsfiddle.net/aMhbz/1/

HTML

<div id="top"></div>
<div id="image">
    <img src="http://lorempixel.com/1200/200/city/" />
</div>
<div id="bottom"></div>

CSS

#top, #bottom {
    height: 50px;
}
#image img {
    max-width: 100%; /* the responsive part */
    height: 200px; /* same height as image */
}

私の答えは、イメージ コンテナーに基づいて、少し追加のターゲティングを行います。次のようなこともできます。

HTML

<img src="your-image.jpg" />
<div>
     <img class="set-height" src="your-image.jpg" />
</div>

CSS

/* for all images to be responsive */
img {
    max-width: 100%;
}
/* specific images */
.set-height {
    height: 200px;  /* the height of your image */
}
于 2013-08-17T21:26:48.937 に答える
0

幅を設定して高さを空のままにすると、自動スケーリングされます

img {
    width: 100%;
}

設定した高さが必要な場合は、オーバーフローを非表示にして画像を div でラップする必要があります。必要に応じてスケーリングします。

編集済み

デモhttp://jsfiddle.net/vYdBt/136/

img {
    width:100%;
}
div {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

リンク先のウェブサイトは背景画像を使用しています。これはこのように行うことができます

デモhttp://jsfiddle.net/kevinPHPkevin/vYdBt/135/

div {
    background: url(http://lionssharedigital.com/wp-content/uploads/2013/04/Lion.jpg);
    width: 100%;
    height: 300px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size:100% auto;
}

これにより、画像も垂直方向に中央揃えになります

于 2013-08-17T21:27:15.640 に答える