css - slider 中的响应图像

Question

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

图片有不同的尺寸和比例。

我想让 slider 保持在相同的高度，同时在循环过程中适本地调整图像大小并使其居中(以前，当出现下一张图像时，容器会调整大小并稍微向上或向下插入页面)。

这已经完成，使用以下内容:

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

我使用的是 1080p 显示器，它看起来不错，但是一个 friend 看过他的 720p 并且图像看起来更小。

这是一个使用“SiteOrigin Slider”小部件的 Wordpress 网站。

1080p 和 720p View 的屏幕截图，但公开发送链接。

1080p Image

720p Image

Answer 1

有多种方法可以使这项工作成功。

主要是因为高度上的 28vh 值导致图像的高度倾斜。图像占视口(viewport)高度的 28% 是这样翻译的。

试试这个，而不是你拥有的。

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

在不查看相关网站的情况下，我认为这应该可行。