Вопрос о дизайне

Добрый ночи господа! У меня стоит резиновый дизайн bootstrap как известно он адаптируется под любые экраны.
И сам вопрос у меня есть изображение 512х512 которое идет через обычный вывод и не адаптируется.
Суть вопроса, подскажите пожалуйста как сделать автоматизирование изображения чтобы сжимало в % что ли, с отступом по 5рх боках. Ну и на больших экранах чтобы не растягивало более 512рх.
Добавлено 04.02.17 в 02:23:34:
Сделал вот так только максимальная почему то не работает. <img src="img/logo.jpg" width="100%" max-width: 512px;>

Удалён (min-width: 1024px) {
img[src="img/logo.jpg"] {
/* Для устройств с расширением экрана от 1024-х пикселей и выше */
width: 512px;
height: 512px;
margin: 0 5px; /* Отступы по бокам от изображения */
}
}

Да нет, не то.
Добавлено 04.02.17 в 03:11:42:
Как то по проще хочу. Это всего одна картинка.

<img src="img/logo.jpg" width="512" height="512" alt="Логотип">
или
<img src="img/logo.jpg" width="100%" alt="Логотип">

Пойми если будет только width="100%" то на больших экранах растянет изображение так что его родная мама не узнает. А если width="512px" то на маленьких экранах за рамки выйдет.

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

Ну, смотри тогда так:
<img src="img/logo.jpg" style="width: 512px; max-width: 100%;" alt="Логотип">

<img src="img/logo.jpg" style="min-width: 100%; max-width: 512px;" alt="" />
как то так