Как правильно сверстать респонсивный дизайн?

Question

[Demigodd]

Вопрос вот в чем, на сайте есть тег
Хочется что бы картинка была к примеру на 100px. Но если задать width картинки 100px, то при уменьшение экрана( в основном на смартфонах) картинка будет большим и выйдет из краю экрана.

Так как этого избежать ? Задать картинке 100%, тоже не вариант потому что мне нужно фиксированный размер, что бы он поместился в dive..

Вот пример JSFiddle , если уменьшить размер экрана то картинки больше не поместятся на экране и в внизу появиться горизонтальный скрол. Как этого избежать и сделать респонсивный дизайн с картинками ?

Answer 1

[Gortyser]

Width: 100px
Max-width: 100%
И за края экрана ничего не выйдет.