如何使SpriteSpin适应响应式设计？

Question

我正在处理的网站使用Twitter Bootstrap并完全响应式。我已经成功地将SpriteSpin与我的网站配合使用，但存在一个问题，由于它向图像所在的div添加了内联css，因此我无法使其响应式。

JS代码如下：

首先它调用图像：

$(function(){
  var frames = [
      "folder/image.jpg",
      (other images)
    ];

然后是这个：

 $("#mali").spritespin({
    width     : 960,
    height    : 540,
    (other code)
  });

我该如何将这个固定的宽度和高度改为使用CSS类或W/H为100％，以使其具有响应性？

我已经尝试将CSS类添加到容器中，但没有成功：

$( "div" ).addClass( "myClass" );

我认为这里的问题是脚本会以某种方式添加内联 CSS。

<div class="spritespin spritespin-instance" unselectable="on" style="overflow: hidden; position: relative; width: 480px; height: 327px;">

您可以在官方SpriteSpin网站上（下面链接）使用检查元素工具查看自行车图像。

请帮我解决这个问题，或者建议其他响应式并可在移动触摸上使用的360度图像精灵旋转解决方案。

SpriteSpin：http://spritespin.ginie.eu/

- Kristijan Korman

Answer 1

您可以在自己的CSS指令后添加!important来覆盖CSS。 最简单的形式如下：

background: red            !important;

如果在HTML中有内联样式属性：

<div style="background: red;">
    The inline styles for this div should make it red.
</div>

你可以尝试使用这个CSS：

div[style] {
   background: yellow !important;
}

但在生产代码中依赖它并不是一个好的实践。更多信息：http://css-tricks.com/when-using-important-is-the-right-choice/, http://css-tricks.com/override-inline-styles-with-css/

- Per Quested Aronsson

---

我认为那样做行不通。如果我有：<div class="sprite" style="background: yellow;"></div>我认为我不能添加CSS，即使使用!important，因为style=""中的CSS标记会覆盖我在CSS文件中放置的所有内容，甚至是!important。但是你给了我一个想法，我在这里找到了答案：http://css-tricks.com/override-inline-styles-with-css/ - Kristijan Korman

太酷了！我不知道你可以这样使用它！我已经更新了我的答案以反映这一点，以造福他人。 - Per Quested Aronsson

Answer 2

我知道这个问题很老了，但是对于那些正在寻找答案的人来说：现在插件已经有了一个设置。只需添加responsive: true，并设置SpriteSpin的宽度即可。请参见官方演示。

- ACJ

Answer 3

使用它与响应式嵌入对象的Bootstrap解决方案非常棒。

var $container = $(".images3d-container")
if ($container.length && $.fn.spritespin != undefined) {

  var source = []
  $container.find(".images").find('img').each(function () {
    source.push($(this).attr('src'))
  })

  $container.find(".view").spritespin({
    source: source,
    animate: false,
    renderer: "image",
    width   : 450,  //  width in pixels of the window/frame
    height  : 450  // height in pixels of the window/frame,
  })

}

.images3d-container .images {
    display: none;
}

.images3d-container .view {
    width: 100%!important; /* here it is */
    height: 0 !important;
    padding-bottom: 100%;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;

}

<section class="images3d-container">
   <div class="view"></div>
   <ol class="images">

     <li><img src="/img/1.jpg"></li>
     
     <li><img src="/img/2.jpg"></li>
     
     <li><img src="/img/3.jpg"></li>
     
     <li><img src="/img/4.jpg"></li>
   </ol>
</section>

- wtorsi

Answer 4

我知道这是一个旧帖子，但今天我遇到了同样的问题。基本上，您只需要在CSS中的每个屏幕大小设置媒体查询来调整容器的大小，图像将响应，因为它们的宽度和高度已经设置为100％。

@media only screen and (min-width: 100px) and (max-width: 767px) {
.spritespin, .spritespin-instance {
  width:383px !important;
  height:300px !important;
}

}

- mikelshikel

---

仍然无法工作，因为spritespin使用JavaScript为这些元素提供了一些内联CSS，即使使用!important也无法覆盖。解决方案是使用类或元素名称，并将其与[style]结合使用以更改内联样式和!important。 - Kristijan Korman