スライダー内の応答画像

Question

現在、Webサイトを設計中です。ページの1つにいくつかの画像を表示するスライダーがあります。

画像はサイズと比率が異なります。

スライダを同じ高さに置いて、サイクルスルーとして適切に画像のサイズを変更してセンタリングしたい（以前は次の画像が表示されたときにコンテナのサイズが変更され、ページがわずかに上下に移動する） 。

これは、以下のものを使用して、行われてきた：

.event-slider { 
 
\t max-height: 250px !important; 
 
} 
 
.event-slider img { 
 
\t height: 28vh !important; 
 
\t margin: auto; 
 
\t width: auto !important; 
 
}

私はそれがで正常に見えるれ、1080ディスプレイを使用していますが、友人は彼の720Pや画像を見ています小さく見える。

これは、 'SiteOrigin Slider'ウィジェットを使用しているWordpressサイトです。

1080pおよび720pビューのスクリーンショットは、まだ公開していますが、リンクを公開して送信しています。

1080p Image

720p Image

Answer 1

この作業を行うことについて移動するいくつかの方法があります。

主に、画像の高さがスキューする高さの28vhの値です。画像は、ビューポートの高さの28％がどのように変換されるかです。

お持ちではなく、これをお試しください。

.event-slider img { 
height: 250px !important; 
margin: auto; 
width: auto !important; 
} 

問題のサイトを見ないとうまくいくと思います。