изображение-размер спрайта больше, чем контейнер, как поместить его в меньший контейнер

Размер спрайта больше, чем контейнер, без использования тега есть ли какой-либо метод, чтобы исправить размер, чтобы соответствовать контейнеру

Размерность изображения-спрайта составляет 562px (x5) ширина x 562px высота

Главное-рабочий стол.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>
1 2
html css background-image css-sprites

1 ответ:

Ключ-это background-size свойство и значение cover. Это позволяет масштабировать спрайт до максимального размера контейнера. Я привел пример с контейнерами, представляющими собой квадраты размером 200 пикселей.

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