1

レスポンシブ画像の場合、CSS プロパティの background-image と background-size を使用しています。これにより、ブラウザ ウィンドウのサイズが変更されたときに、画像のサイズが自動的に変更されます。問題は、画像の下のコンテンツもサイズ変更されないことです。たとえば、この設定では、テキストの段落の上に画像があります。

<div class="container">
    <div class="image></div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut ligula lacinia, eleifend risus nec, adipiscing magna. Integer egestas fermentum lectus, ac bibendum diam faucibus eu.<p>
</div>

私が持っているCSSの場合：

.container {
    width: 50%;
}

.image {
    background-image: url('image.jpg');
    background-repeat: no-repeat;
    background-size: 100%;
    height: 350px;
}

ブラウザを調整すると画像も調整されますが、画像には一定の高さ(350px)があるため、画像と段落の下に隙間ができてしまいます。画像のサイズが変更されたときに段落が画像のすぐ下にとどまるようにするために行うことができる CSS の変更はありますか?

これはjsFiddleの例ですhttp://jsfiddle.net/qKGt9/

4

5 に答える 5

2

テキストを周囲に流したい場合は、画像を背景として使用しないでください。レスポンシブ デザインの手法では、通常、このトリックをIMG要素に使用します。

/* Responsive image CSS */
img {
  width: 100%;
  height: auto;
}

実際の例として、あなたのフィドルをフォークしました: http://jsfiddle.net/WDFBR/

HTML 構造と CSS を少し変更する必要があります。主なことは、画像を表示するためIMGに a の代わりに要素を使用していることです。Twitter BootstrapDIVのような人気のあるフレームワークの内部にある商品を見てみると、優れたレスポンシブ デザインについて多くを学ぶことができます。

于 2013-07-22T18:04:22.427 に答える
0

これがあなたの100％の解決策です：

以下の URL に従ってください。最近、同じ質問に回答しました。

レスポンシブ CSS 背景画像 - コンテンツを追従させる方法

さらにヘルプが必要な場合は、大歓迎です :)

于 2014-09-04T07:47:25.287 に答える