48

Bootstrap を使用してカルーセルを作成しています。大きな画像があるため、画面が画像よりも小さい場合、比率が維持されません。

どうすればそれを変更できますか？

これが私のコードです：

.carousel .item {
  height: 500px;
}
.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
}

http://jsfiddle.net/DRQkQ/

画像を 100% の幅に合わせる必要がありますが、高さを 500 ピクセル (500 ピクセルだと思います) に保つ必要があります。これは、小さい画面では画像の左端と右端が見えないことを意味します。

画像をdivに入れてみました

overflow: hidden;
width: 100%;
height: 500px;
display: block;
margin: 0 auto;

しかし、うまくいきません

ありがとうございました！

4

9 に答える 9

40

問題は、ブートストラップ CSS でここにあります。

img {
  max-width: 100%;
  width: auto   9;
  height: auto;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}

画像を設定max-width: 100%;しても、ビューポートより大きくなりません。CSS でその動作をオーバーライドする必要があります。

.carousel img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 500px;
  max-width: none;
}

max-width: none;下部に追加されていることに注意してください。これはデフォルトの max-width 値であり、制限を解除します。

ここにあなたのフィドルが更新されました。

于 2013-06-25T09:00:57.343 に答える
10

imgカルーセル アイテム内のタグを削除し、背景を追加します。このようにして、CSS3 の cover プロパティを使用できます。

.item1 {
    background: url('bootstrap/img/bg.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
于 2014-04-30T12:48:59.390 に答える
3

他の人が述べたように、css3 はこれにうまく機能します。コンテナに全幅、固定高さを使用し、「カバー」でアスペクト比を維持して画像をスケーリングし、オーバーフローを捨てました：

.carousel .carousel-inner img {
  width: 100%;
  height: 30em;
  object-fit: cover;
  overflow: hidden;
}
于 2016-05-12T14:41:33.653 に答える
3

このコードは最終的に私のために働いた：

.carousel .item {
    background:#F9F9F9;
    border:1px solid #E0E0E0;
    overflow:hidden;
    margin-bottom:1em;
    margin-top:1em;
    padding:5px;
}
.carousel-inner > .item > img {
    border: 1px solid #DDDDDD;
    float: left;
    margin: 0pt 3px;
    padding: 2px;
    height: none;
    width:  100%;
}

.carousel-inner > .item > img:hover {
    border: 1px solid #000000;
}
于 2014-12-24T13:45:50.633 に答える
3

以下に示すように、 carousel.css 行から高さの行をコメントアウトすることで、これを実現できました。

.carousel-inner > .item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  /*height: 500px;*/
}
于 2014-10-14T14:12:37.847 に答える