Как сделать картинку изменяемой под размер экрана

Когда я делал тест на умение гуглить, мне нужна была функция которая позволяла бы впечатывать данные введенные пользователем поверх картинки с изображением некоторого шаблона сертификата. Для этих целей используется canvas, причем туда сначала вставляется картинка при помощи конструкции new Image(),а потом рисуется нужный текст.

Но если экран маленький (смартфон) и картинку просто так вставить, то на странице появятся полосы прокрутки, и все изображение не будет видно. Чтобы решить такую проблему, достаточно сделать картинку адаптивной, а точнее в моем случае сам canvas. И даже не нужно создавать дополнительный файл стилей, а просто добавить в тег canvas стиль style="max-width: 100%;". Для того чтобы изображение отставало немного от краев, при уменьшении окна - можно сделать 90%

Вообще я сам использовал конструкцию, которую нашел в инете 

<div style="width: 95%; max-width: 800px; margin: 0 auto; ">
  <img style="width: 100%; height: auto; " src="cert.jpg" />
</div>

margin - это центрирование. Но вот это делает то же самое:

 <center>
  <img style="max-width: 95%"src="cert.jpg" />
</center>

Нюансов отличия не знаю, но работают обе конструкции, и да, судя по всему height можно убрать - ничто не меняет, а если и меняет то не видно что.

ЗЫ написано для себя, чтобы в следующий раз если понадобится снова что-то изменять, не искать где попало и пробовать все что там понапишут.