イメージスライダー（CSS/Html）

Question

イメージスライダーを持つウェブサイトを作成しました。 しかし私のすべてのイメージはサイズが違うので、イメージが変わるとページもスクロールします... 問題を解決するために私を助けてください。 デモのリンクを提供しています。 Click here for Demoブラウザのサイズを小さくすると、よりよく訪問することができます。

Answer 1

同じ高さのすべての画像を編集すると、問題が解決します。あなたは...最高のが役立つだろう少しのコードを見て便利だろう

Answer 2

あなたのスタイルシートに

.mySlides { 
    height: 1000px; 
    overflow: hidden; 
} 

を追加しますが、これは彼らが1000pxよりも背が高い場合は、あなたの画像をトリミングし、彼らは短いなら空白文字以下で去ることに注意してくださいすることができます。 1000pxの代わりに任意の値を使用できます。

これにもかかわらず、これは悪い回避策です。それを行う最善の方法は、すべての画像を同じ高さにリサイズすることです。

Answer 3

あなたの問題を解決するには、画像の一貫したサイズを使用する必要があります。これは高さの問題を修正します。 1000ピクセル×500ピクセルの5つのイメージを作成し、すべてのスライドに使用します。 イメージごとにサイズを変えたい場合は、「白い枠線」または異なる高さが必要です。

Answer 4

異なる高さの要素を持つことはできません。少なくとも1つの工程で、あなたがこれを行うことができ、スライダーの高さを修正する必要があります。

.w3-content { 
    height: 700px; 
    overflow: hidden; 
} 

それとも

.mySlides { 
    height: 700px; 
    overflow: hidden; 
} 

の画像の一部が1000px未満の高さをHASEので1000pxはあなたを助けていないことに注意してください。最小の高さを固定高さとして選択する必要があります。