Flexslider 固定图像

Question

我在 shopify 中使用 flexlider。我希望滑块内的图像具有 css 的固定大小，但始终在宽度上展开 100% 而不会在高度上被压扁。因此，如果我要上传一张高度为 597 像素的图片，我需要它以 450 像素显示，但纵横比保持不变。有没有办法用 flexslider 做到这一点？

Answer 1

在 flexslider.css 中你有一个样式规则：

.flexslider .slides img {width: 100%; display: block;}

您可以将其替换为如下内容：

.flexslider .slides img {width: auto; height: auto; max-width: 100%; max-height: 100%; margin: 0 auto; vertical-align: middle;}

如果对你有帮助，请告诉我。