流式布局和CSS精灵

Question

我在固定宽度的设计中使用了css sprite来显示背景。现在我要改成流体布局，但由于背景位置的原因，当浏览器调整大小时，背景图像会变得不协调。

是否可能在流体网格背景中使用css sprite，在布局调整大小时进行调整？

我需要与IE 7和8兼容的布局，同时还兼容其他最新的浏览器。

- Jitendra Vyas

---

图片出了什么问题？ - Brian Maltzan

Answer 1

在@brianMaltzan关于@media写的内容之外，您可以使用不同的分辨率组来拥有不同的样式表。

<link rel='stylesheet' media='(max-width: 700px)' href='css/small.css' />
<link rel='stylesheet' media='(min-width: 701px) and (max-width: 1024px)' href='css/medium.css' />
<link rel='stylesheet' media='(min-width: 1025px)' href='css/large.css' />

或者CSS代码块用于定义您页面的样式：

@media (max-width: 860px) {
    body {
         width: 600px;
    }
}
@media (min-width: 861px) and (max-width: 1024px) {
    body {
         width: 800px;
    }
}
@media (min-width: 1025px) {
    body {
         width: 1000px;
    }
}

我建议使用一些固定的尺寸，在每个样式表中进行更改，而不是百分比（如果您正在使用它们）。您能展示一个在流体布局中使用雪碧图的实例，以便我们可以看到这个问题吗？

- Danny S

---

是的，这正是我所想的，然后在精灵内添加多个版本的图像。当你调整大小超过阈值时，视图将重新绘制。对于图像显示问题，也许你需要使用overflow: hidden？ - Brian Maltzan

Answer 2

我还没有尝试过这个方法，但有人正在使用CSS Clip实现。以下链接提供了相关资料：http://bowdenweb.com/wp/2011/08/making-responsive-accessible-high-dpi-css-sprites.html 和 http://chiefalchemist.com/responsive-css-sprites-proof-of-concept-v0-1-0/。

- Andri

---

剪辑（Clip）在ie7+8中得到支持，但有一种备用语法，可以参考此链接：http://reference.sitepoint.com/css/clip#compatibilitysection - Brian Maltzan

Answer 3

如果您可以使用一些JS，就可以像这个片段一样实现。我使用jQuery，但您可以轻松地将其转换为纯JS。

我使用比例计算精灵宽度和其父宽度之间的比率来缩放精灵。我在其上设置了一些负边距，因为使用CSS transform属性缩放div会改变外观但不会改变计算大小。

var $sprits = $('.sprit');
$sprits.each(function() {
  
  $(this).data('originalWidth', $(this).width());
  $(this).data('originalHeight', $(this).height());
  $(this).data('originalParentHeight', $(this).parent().height());
})

function setSpritsScale() {
  
  $sprits.each(function() {
    
    ratio = $(this).parent().width() / $(this).data('originalWidth');
    marginWidth = $(this).data('originalWidth') - $(this).parent().width();
    marginHeight = $(this).data('originalHeight') - $(this).data('originalParentHeight') * ratio;
    $(this).css({
      'transform': 'scale(' + ratio + ')',
      'margin': (-marginHeight / 2) + 'px ' + (-marginWidth / 2) + "px"
    });

  })
}

$(window).resize(setSpritsScale);

setSpritsScale();

.columns {
  float: left;
  width: 20%;
}
.sprit {
  display: inline-block;
  background-image: url('http://changlee.com.br/cascavel/wp-content/uploads/2013/10/sprite2l-500x500.jpg');
  background-repeat: no-repeat;
  min-width: 75px;
  min-height: 75px;
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="columns">
  <div class="sprit"></div>
</div>

<div class="columns">
  <div class="sprit"></div>
</div>
<div class="columns">
  <div class="sprit"></div>
</div>
<div class="columns">
  <div class="sprit"></div>
</div>
<div class="columns">
  <div class="sprit"></div>
</div>

- Cawet

Answer 4

@media 可能适合您。不确定ie7&8是否支持。

- Brian Maltzan

---

你能否更详细地解释一下当我们有固定大小的精灵PNG时，@media如何帮助我们？ - Jitendra Vyas

完全没有回答问题。 - dmackerman

Answer 5

不，这是不可能的。推荐的解决方案是在内联图像中使用精灵图，并在CSS中设置该元素的高度和宽度。这里有一个链接，解释了如何做到这一点。这样可以使您的图像随着布局调整大小。

- Alex Morales