Mirkom63
@Mirkom63
Я программист

Как сверстать картинку?

Как вставить спрайт в тег img?
И при этом у img стоит width равным 100%, родительский блок меняет свою ширину в зависимости от размера экрана, соответственно высота меняется вместе с шириной в пропорциях картинки.
По факту вот сайт: zernokorm.tyrnov.com
Там картинки животных. Хочу перевести все картинки в спрайты.
  • Вопрос задан
  • 812 просмотров
Пригласить эксперта
Ответы на вопрос 3
@tef
Не понимаю в чём проблема?
https://jsfiddle.net/ajtgcq44/
Ответ написан
1. Спрайты только для background можно использовать.
2. В макете у вас картинки не в векторе случаем? Тогда можете без проблем сохранить и использовать svg (статья в помощь)
Ответ написан
Sergamers
@Sergamers
front-end
.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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы