image-sprite size比容器大，如何将它装入一个较小的容器中

Question

精灵的大小比容器大，不使用标签是否有任何方法来修复大小以适应容器

图像精灵的尺寸为562像素（x5）宽度x 562像素高度

main-desktop.png

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>