html - 响应图像缩小/不填充容器

标签 html css slider carousel shopify

我的 slider 已在 http://cirrusfitness.com 上启动并运行

我遇到的问题是,当我缩小浏览器(以测试响应)时, slider 内的图像也会缩小,独立于轮播容器,并在面板寻呼机导航之前创建一个大的白色间隙。

我尝试使用 background-size: cover 但我似乎无法定位正确的元素。

如有任何建议,我们将不胜感激。非常感谢。

最佳答案

您是否在为 slider 使用插件?似乎每次滑动切换时JavaScript都会自动生成样式,这使得您在后台的CSS代码毫无用处。

您可以尝试将背景大小设置为 !important,但我不确定这是否可以完美解决。除非您可以找到并更改 Javascript,否则我看不出有任何简单的方法可以解决这个问题。

我已经使用并会推荐这个插件,它有固定大小的图像:http://www.menucool.com/javascript-image-slider

关于html - 响应图像缩小/不填充容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30626528/

相关文章:

javascript - 更改 javascript 缩略图的 alpha 级别

javascript - jQuery如何加载图像的一部分

jquery - 使用jquery以不同的间隔滑动图像

jquery - 如何创建一个 WordPress 主页 slider ,其中包含来自 4 个独特类别的最新或精选帖子的多个查询?

javascript - 如何将<a>改为<div>?

html - 相同 CSS 类(Bootstrap 中的 .thumbnail)的图像以各种尺寸显示

javascript - 我的 Canvas 游戏中有不同的 'states'

javascript - 如何使用 Javascript 调整 DIV 及其组件的大小

html - 表格标题在某些浏览器中显示在轮廓内,在其他浏览器中显示在轮廓外

css - 在按钮内垂直堆叠跨度