1

我正在使用 jQuery Cycle 创建幻灯片，并且我需要能够使用 css 响应地调整幻灯片中图像的大小。到目前为止，循环一直在控制图像的宽度和高度，以至于我无法做到。我已经能够在刷新页面时根据窗口宽度调整图像大小，但是在调整窗口大小时图像不会动态调整大小。我正在尝试用 Javascript 制定解决方案，但我真的很希望能够摆脱纯 css。

4

5 回答 5

0

jQuery Cycle 在<img>标签上设置宽度。这是第一个问题。我会尝试删除它，看起来Cycle的选项有这个 value slideResize，尝试将它设置为falseor 0。

下一步将在容器和width: 100%imgs 上设置最大宽度。

于 2013-06-19T20:22:54.773 回答
0

使图像具有响应性的最佳选择是，顺便说一句，它没有在容器中。

img {
    width: 100%;
    height: auto;
}

现在，它将拉伸到页面的宽度，但如果包含它，它将拉伸到容器的宽度，要尝试的是，使容器也可以增长和收缩。

于 2013-06-19T20:13:59.043 回答
0

将 img 元素的宽度设置为 100%，将高度设置为 auto 以考虑纵横比。如果您不希望图像 100% 显示在浏览器中，请添加容器元素。

于 2013-06-19T19:26:25.693 回答
0

只是一个建议 - 但您可能希望使用 JavaScript（或 AJAX 服务或其他东西）之类的东西来处理这个问题，因为如果您要在浏览器中调整图像大小，这会给浏览器带来难以置信的压力浏览器来处理所有的调整大小和缩放。

您可能希望针对特定分辨率并相应地根据“最接近”的视口大小提供图像。

于 2013-06-19T19:22:21.190 回答
0

您可以设置与容器相关的图像的宽度或高度

.container{width:200px}.container img {width:100%}

希望这可以帮助！

于 2013-06-19T19:23:24.720 回答