4

Bootstrap 3 で全幅のカルーセルを作成するために、コンテナーをラップせずに直接行に配置しました。カルーセルは、画面全体の幅に完全に引き伸ばされ、電話のフォーマットに合わせて拡大縮小されます。しかし、ここに問題があります。カルーセルの幅が 100% であるため、スマートフォンではカルーセルのサイズが大きくなりすぎます (幅 320 ピクセル): 技術的には正しいのですが、高さがもっと高ければいいのにと思います。

質問: 最小の高さを設定し、画像の縦横比を維持し、その最小幅で左右をトリミングするにはどうすればよいですか?

4

2 に答える 2

3

carousel-inner をマイナスマージンで画面より広く設定しました。これにより、カルーセルがオーバーフローし、より高く、より狭く表示され、左右が効果的にトリミングされます。大きな画面では、画像全体が表示されるように通常に戻します。最後に、overflow: hidden; があることに注意してください。モバイル ユーザーが意図しない横スクロールを経験しないように、正しい親要素で。

.carousel-inner{
  width: 120%;
  margin-left: -10%;
}

@media (min-width: 768px){
  .carousel-inner{
    width: 100%;
    margin: 0;
  }
}
于 2015-08-19T08:15:39.653 に答える