CSS спрайт в div с шириной%?

Question

Возможно ли иметь изображение Css спрайта в div с width в %?

Теперь я попробовал это, но не работает:

.sprite-gloss-vulc {
    background-image: url("/images/sprite-img.png");
}

.sprite-gloss-vulc-anello { 
  background-position: -1px -0px; 
  width: 120px; 
  height: 120px; 
}

#flex {
 width: 17%;
}

img {
  width: 120px; 
  height: 120px; 
}


<div id="flex">
    <img src="/images/transparent.gif" class="sprite-gloss-vulc sprite-gloss-vulc-anello">
</div>

Когда ширина родителя div больше 120px (ширина img) работает, но если я изменить размер страницы, спрайт CSS "обрезается". Вырезано, потому что ширина новости div меньше, но размеры .sprite-gloss-vulc-anello они все те же.

Я надеюсь, что вы можете простить меня за мой английский и помочь мне.... Большое спасибо!

Answer 1

Вы даете высоту ширину и дважды img тег и класс

.sprite-gloss-vulc {
    background-image: url("/images/sprite-img.png");
}

.sprite-gloss-vulc-anello { 
  background-position: -1px -0px; 
  width: 100%; 
  height: 100%; 
}

#flex {
 width: 100%;
}

Answer 2

К сожалению, вы не можете использовать спрайт с процентами.

Вы можете добавить свойство max-width в тег sprite-gloss-vulc-anello или img, но я тоже не буду работать.

Если вы хотите изменить размер изображения динамически на основе родительского div, вы должны использовать его как отдельный файл изображения.