How to make a picture?

Question

HTML

How to insert a sprite into an img tag?
And at the same time, img has a width equal to 100%, the parent block changes its width depending on the screen size, respectively, the height changes along with the width in the proportions of the picture.
In fact, here is the site: zernokorm.tyrnov.com
There are pictures of animals. I want to convert all images to sprites.

Answer 1

I don't understand what is the problem?
https://jsfiddle.net/ajtgcq44/

Answer 2

1. Sprites only for background can be used.
2. In the layout you have pictures not in the vector by any chance? Then you can save and use svg without any problems ( article to help)

Answer 3

.sprite{ /* Картинки должны быть одинаковой размерности */
 background: url(/img/spritesheet.png) no-repeat;  /* ваш спрайт */
 width: 278px; /* ширина одной картинка */
 height: 189px; /* высота одной картинки */
}

.sprite.pig{
 background-position: 0px 0px; /* допустим это первая картинка и у вас нет отступов слева ( т.е картинка начинается сразу)  */
}

.sprite.fish{
  background-position: -278px 0px; /* Следующая картинка справа на той же полосе (если я не ошибаюсь, но принцип такой) */
}

<div class="sprite pig"><div>
<div class="sprite fish"><div>