图像精灵大小大于容器，如何将其放入较小的容器中

Question

精灵的大小比容器大，不使用标签有什么方法可以固定大小以适应容器

图像精灵的尺寸为 562px (x5) 宽 x 562px 高

main-desktop.png

.container_outer{
  height:200px;
  width:100%;
}
.chrome-part, .ie-part, .firefox-part, .opera-part, .safari-part{
  background-image:url("main-desktop.png");
  background-repeat:no-repeat;
  height:562px;
  width:562px;
  float:left;
}
.container_outer > .chrome-part{
  background-position: 0px 0px;
  border:solid 1px red;
}
.container_outer > .ie-part{
  background-position: -562px 0px;
}
.container_outer > .firefox-part{
  background-position: -1124px 0px;
}
.container_outer > .opera-part{
  background-position: -1686px 0px;
}
.container_outer > .safari-part{
  background-position: -2248px 0px;
}

<div class="container_outer">	
  <div class="ie-part"></div>
  <div class="firefox-part"></div>
  <div class="opera-part"></div>
  <div class="safari-part"></div>
  <div class="chrome-part"></div>
</div>

Answer 1

键是background-size property 和cover 值。这会将精灵缩放到容器的最大尺寸。我做了一个例子，容器是 200px 的正方形。

.container_outer{
  height:200px; /* assuming a square container 200px */
  width:100%;
}
.chrome-part, .ie-part, .firefox-part, .opera-part, .safari-part{
  background-image:url("https://i.stack.imgur.com/2VKyZ.png");
  background-repeat:no-repeat;
  background-size: cover;  /*  as large as possible */
  height:100%;
  width:200px;  /* assuming a square container 200px */
  float:left;
}
.container_outer > .chrome-part{
  background-position: 0px 0px;
  border:solid 1px red;
}
.container_outer > .ie-part{
  background-position: -200px 0px;
}
.container_outer > .firefox-part{
  background-position: -400px 0px;
}
.container_outer > .opera-part{
  background-position: -600px 0px;
}
.container_outer > .safari-part{
  background-position: -800px 0px;
}

<div class="container_outer">	
  <div class="ie-part"></div>
  <div class="firefox-part"></div>
  <div class="opera-part"></div>
  <div class="safari-part"></div>
  <div class="chrome-part"></div>
</div>