滑塊中的響應式圖像

Question

我目前正在設計一個網站，其中一個頁面有一個滑塊來展示一些圖像。

圖像是不同的大小和比例。

我希望將滑塊保持在同一高度，同時適當調整圖像的大小並使其居中（以前，當下一個圖像出現時，容器將調整大小並輕輕向上或向下推動頁面） 。

這已經完成，使用以下：

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

我使用的是1080p的顯示器，它看起來不錯的，但朋友一直看着他的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; 
} 

沒有看問題的網站，我認爲這應該工作。