3

Bootstrap を使用して、ページの大部分を占めるカルーセル コンポーネントを使用する Web サイトを作成しています。ブラウザ ウィンドウのサイズを変更してビューポートを水平方向にドラッグすると、画像の幅が歪んで歪むことがわかりました。カルーセルに次の全体的な CSS スタイルを設定し、さまざまな幅のメディア クエリを設定しました。

ブラウザ ウィンドウを水平方向にドラッグしたときに画像の幅が歪まないように.carousel .item、CSS ルールまたはプロパティに適用できる修正はありますか? .carousel img私はwidth:100%;おそらくこの問題を解決できると思っていましたか？

ブラウザのサイズを水平方向に変更したときに発生する歪みの画像を次に示します。 ここに画像の説明を入力

ここにウェブサイトがあります：http://www.the-session.co.uk/jen/

CSSは次のとおりです。

.carousel .item {
  height: 900px;
}
.carousel img {
  min-width: 100%;
  height: 900px;
}

@media (max-width: 979px) {

  .carousel .item {
    height: 500px;
  }
  .carousel img {
    width: auto;
    height: 500px;
  }
}


@media (max-width: 767px) {

  .carousel .item {
    height: 300px;
  }
  .carousel img {
    height: 300px;
  } 
}
4

3 に答える 3

6

問題は、問題の原因となっている特定の高さおよび/または幅 (レイアウトに応じて) を定義しているという事実にあります。デザインで許容される場合は、画像が歪まないように、両方の @media ファイルで「height:900px」を.carousel imgから「height:auto」に変更します。

ただし、望ましい結果が実際にカルーセル画像を拡大してビューポート全体を埋めることである場合は、別の解決策が必要になります。おそらく、画像を背景画像に変更して、絶対位置の div を埋める必要があります。

于 2013-05-16T18:23:33.817 に答える
-1

このように画像をスケーリングしようとすると、画像の最初の縦横比が維持されないという問題があります。

代わりに、試してみてくださいbackground-size: contain。これにより、画像が長軸に沿ってコンテナーを埋めるように、ブラウザーに比例して画像をスケーリングするように指示されます。

于 2013-02-23T17:23:08.187 に答える