6

背景画像に比例してカルーセルをスケーリングしたい

この質問ではBootstrap Carousel Image does not scalely proportately画像を明示的な寸法のままにすることをお勧めしますが、それが何を意味するのか理解できません。

4

3 に答える 3

16

これをHTMLに設定します

imgカルーセルのすべての要素に対して、次のようにwidthプロパティを設定でき100%ます (ただし、自然解像度がコントロールよりも大きい場合は必要ありません)。

<img src="http://i.imgur.com/OEdBxVD.jpg" width='100%'>
  • 通常、この画像は小さすぎて完全に拡大できませんが、100% 拡大されます。
  • widthまたはheightがピクセル サイズに設定されていないことを確認します。

jFiddle

画像は全画面表示になるため、利用可能な全幅を自然に占有しようとする解像度を手に入れるようにしてください。ブラウザが画像を拡大する必要がある場合、アーティファクトが発生します。

于 2013-09-01T15:53:11.783 に答える
1

つまり、画像 (または画像スタイル) から width=px と height=px を除外することです。width="100%" を設定して、高さを省略できます。ブラウザは比例してスケーリングします。

于 2013-09-01T15:38:34.910 に答える
0

インライン スタイルなしでこのオプションを試してください。これをスタイルシートに追加するだけで、bootstrap.css スタイルをオーバーライドできます。

.carousel .item {
width: 100%;
/*slider width*/
max-height: 600px;
/*slider height*/
}
.carousel .item img {
width: 100%;
/*image width*/
}
于 2016-01-02T23:05:01.180 に答える