滑块中的响应式图像

Question

我目前正在设计一个网站，其中一个页面有一个滑块来展示一些图片。

图片有不同的大小和比例。

我想让滑块保持在相同的高度，同时在循环中适当地调整图像大小和居中（以前，当下一个图像出现时，容器会调整大小并稍微向上或向下推动页面）。

这已经完成，使用以下：

.event-slider {
	max-height: 250px !important;
}
.event-slider img {
	height: 28vh !important;
	margin: auto;
	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;
}

不看有问题的网站，我认为这应该可行。