强制较大的图像（来自精灵）适合较小的 div？

Question

我有一个大小为 1030px-510px 的大图像（图像精灵），其中包含两个小图像 (515px-515px)。
我想从精灵中获取两个小图像并为两个<img> 标签设置背景。我正在使用此代码：

.img-1, .img-2 {
  width: 515px;
  height: 515px;
  background: url(http://i.stack.imgur.com/aozNS.png) no-repeat;
}

.img-1 {
  background-position: 0px 0px;
}

.img-2 {
  background-position: -515px 0px;	
}

<div class="col-sm-6">
  <img class="img-1">
</div>
<div class="col-sm-6">
  <img class="img-2">
</div>

但是这两个图像比我的两个 div (class="col-sm-6") 大。那么，有什么方法可以将我的两个小图像放入我的两个 div 中？
我不想将我的两个 div 更改为更大的 (class="col-sm-7")。

Answer 1

在图像上设置像素特定的宽度和高度将使它们占据确切的空间。引导 cols 具有响应性，因此它们会根据指定的 col 编号（例如 col-6 或 col-4）调整其大小以适应空间。

如果我正确理解了您的问题，那么您的问题是您需要删除图像上的 512px 宽度和高度 css 属性并改用 width: 100% 。图像将调整其宽度以适合容器，高度应调整以适合宽度。

[编辑] - 没关系，仅当它是使用 src 加载而不使用 css 背景属性的图像时才有效。您可能要考虑这样做。如果您绝对必须这样做，那么您可以像其他答案一样保持较小的固定尺寸，或者尝试使用 flexbox 之类的东西来让图像适应尺寸。

Answer 2

您必须将 background-size 设置为 200%（对于 2 张图像），并以百分比指定 background-position：

.img-1, .img-2 {
  width: 100px;
  height: 100px;
  background: url(http://i.stack.imgur.com/aozNS.png) no-repeat;
  background-size: 200%;
}

.img-1 {
  background-position: 0 0;
}

.img-2 {
  background-position: 100% 0;	
}

<div class="col-sm-6">
  <img class="img-1">
</div>
<div class="col-sm-6">
  <img class="img-2">
</div>