在 jquery 滑块中处理不同大小的图像答案

【问题标题】：handling different sized images in jquery slider在 jquery 滑块中处理不同大小的图像
【发布时间】：2012-02-22 22:28:18
【问题描述】：

嗨，我使用标准的 jquery 图像滑块/轮播来显示图像。

我在滑块中使用了各种尺寸的图像。如何确保宽度和高度不会影响滑块的尺寸，同时看起来还不错。例如滑块宽度= 300px 高度= 200px？

但我没有使用这个，因为它不适合响应式设计

【问题讨论】：

【解决方案1】：

您必须使滑块占位符与最大图像一样大，或者如果您希望它们都具有相同的大小，请在 <img> 标签上设置 width 和 height 属性以覆盖实际尺寸图片。

如果宽高比不一致，那么您可能需要动态计算缩小后的尺寸，无论是在服务器上的 jQuery/JavaScript 中。

【讨论】：

第一个选项不起作用，因为我无法确定尺寸会是什么。手动设置宽度和高度确实会在您有高纵向图像后跟宽横向图像时弄乱图像。
是的，这就是计算出的宽度/高度。您可以找到图像的最大边并计算出与滑块尺寸相匹配所需的增加/减少百分比，然后应用相同的与其他图像“侧面”（宽度或高度）的比例。如果你有风景/肖像图像并且你不想旋转它们，我认为不管你怎么做都会看起来很笨拙。