如何使 SpriteSpin 响应？答案

【问题标题】：How to make SpriteSpin responsive?如何使 SpriteSpin 响应？
【发布时间】：2019-08-26 22:02:27
【问题描述】：

我正在开发的网站是使用 twitter 引导程序创建的，并且完全响应。我已经成功地让 SpriteSpin 与我的网站一起工作，但是有一个问题，我不能让它像我网站的其他部分一样响应，因为它会将内联 css 添加到图像所在的 div 中。

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/

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案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/

【讨论】：

我认为这行不通。如果我有：<div class="sprite" style="background: yellow;"></div> 我不认为我可以添加 css，即使使用 !important，因为 style="" 中的 css 标记，它会覆盖我放入 css 文件中的所有内容，甚至是！important。但是你给了我一个想法，我在这里找到了答案：css-tricks.com/override-inline-styles-with-css
酷！我不知道你可以这样使用它！为了他人的利益，我更新了我的答案以反映这一点。

【解决方案2】：

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

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

}

【讨论】：

仍然无法工作，因为 spritespin 为这些元素提供了一些内联 css，其中包含无法覆盖的 javascript，即使使用 !important 也不行。解决方案是使用类或元素名称并将其与 [style] 组合以更改内联样式和！important。

【解决方案3】：

将它与响应式嵌入对象的引导解决方案一起使用非常棒

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>

【讨论】：

【解决方案4】：

我知道这个问题很老，但对于碰巧正在寻找答案的人：插件现在有一个设置。只需添加responsive: true，并设置SpriteSpin 的宽度。见the official demo。

【讨论】：