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

Question

[Александр Петров]

Как вставить спрайт в тег img?
И при этом у img стоит width равным 100%, родительский блок меняет свою ширину в зависимости от размера экрана, соответственно высота меняется вместе с шириной в пропорциях картинки.
По факту вот сайт: zernokorm.tyrnov.com
Там картинки животных. Хочу перевести все картинки в спрайты.

Answer 1

[tef]

Не понимаю в чём проблема?
https://jsfiddle.net/ajtgcq44/

Comments

[Александр Петров]

В том, что нужно использовать спрайты.

[tef]

Александр Петров: ну так в чём проблема? Сделайте в фотошопе спрайт и используйте его.

Answer 2

[Кирилл]

1. Спрайты только для background можно использовать.
2. В макете у вас картинки не в векторе случаем? Тогда можете без проблем сохранить и использовать svg (статья в помощь)

Comments

[Александр Петров]

Неа, картинки растр(
В будущих проектах планирую использовать svg) Только недавно узнал про эту крутую возможность)

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>

Comments

[Александр Петров]

Это да. Это я понимаю как делается. Но если сделать width: 25%, как на сайте, тогда при изменении размера экрана, высота останется 189px, а должна меняться пропорционально.

[Сергей]

Александр Петров: Ты не сможешь манипулировать размерами используя спрайт.

[Александр Петров]

Неужели есть ситуация в верстке, которую невозможно решить?

[tef]

Александр Петров: Ситуаций таких много. Просто немного непонятно, что вам конкретно нужно сделать. Имитировать background cover?

[Александр Петров]

tef: да-да. но только для спрайта)))

[tef]

Александр Петров: в вашем случае проще использовать svg. Иначе нужно будет несколько изображений одной квртинки под все разрешения, и нужно будет менять размер блока и позицию бэкграунда в зависимости от разрешения. Либо извращаться с бэкграунд сайзом. И то и то не нормально.

[Александр Петров]

tef: Да в принципе сейчас в SVG уже и начали переводить) Спасибо!