6

http://twitter.github.com/bootstrap/examples/carousel.htmlを使用しているときにウィンドウブラウザの幅を狭くすると、背景画像のアスペクト比が変化することがわかります。それを維持したい（1：1）、画像を左または右にトリミングするか、水平に揃えたい。

何を指示してるんですか？

4

3 に答える 3

5

2つのオプションがあり、どちらも画像の比率を維持します。

オプション1

background: url(yourimage.jpg) no-repeat center center / cover;

最後の部分はbackground-size: coverプロパティです。ブラウザの幅に応じて背景画像を拡大し、div全体を確実に埋めるようにします。

例： http： //i.imgur.com/0tQ9Rxm.png

オプション2

background: url(yourimage.jpg) no-repeat center center;

同じ効果ですが、ズーム部分がありません。背景はアスペクトを維持し、中央に配置されたままになりますが、ブラウザの幅が画像の幅（この場合は1500px）よりも大きい場合は、背景色（この場合は白）が表示されます。

例： http： //i.imgur.com/6x594jH.png

オプション1をお勧めします。ブラウザのサイズを変更した場合にのみズーム効果が表示されますが、ほとんど誰も表示されません。訪問者には、塗りつぶされた背景のみが表示されます。

于 2013-01-31T03:23:31.713 に答える
5

@jgthmsの返信のフォローアップとして、オプション1を使用しました。ただし、iOS Safariでは、背景画像がまったく表示されませんでした。1行のCSS構文がうまく機能していなかったようです。次のように変更することで、動作させることができました。

background: url(yourimage.jpg) no-repeat center center;
background-size: cover;
于 2013-02-23T19:09:43.883 に答える
0

私のように、CSSがどこで機能するのかわからなかった人のために、これがコンテキスト内の例です（iOSスタイルを使用）。これはBootstrap3.1.1を使用していることに注意してください。

    <div class="item active" style="background: url(slide1.jpg) no-repeat center center; background-size: cover;">
      <div class="container">
        <div class="carousel-caption">
          <p>Example text
            <a class="btn btn-lg btn-primary" href="YourURLHERE" role="button">YourLink</a>
          </p>
        </div>
      </div>
    </div>
于 2014-02-22T06:19:01.030 に答える