html - 强制较大的图像(来自 Sprite )适合较小的 div？

Question

我有一个大小为 1030px-510px 的大图像(图像 Sprite )，其中包含两个小图像 (515px-515px)。
我想从 Sprite 中获取两个小图像并为两个设置背景 <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

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

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

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