Изменение вывода изображения в зависимости от разрешения

Добрый день, на данный момент использую такую конструкцию:

{if !$wa->isMobile()}
    {* ПК *}
			<img class="" data-src="/картинка для ПК" src="data:image/gif;base64,R0lGODlh6gDqAIAAAP///wAAACH5BAEAAAEALAAAAADqAOoAAAL+jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJFCtavIgxo8Y9jRw7evwIMqTIkSRLmjyJMqXKlSxbunwJM6bMmTRr2ryJM6fOnTx7+vwJNKjQoUSLGj2KNKnSpUybOo1UAAA7" alt="Электросамокаты" width="1026" height="340">
{else}
    {* Мобилка *}

<img class="" data-src="картинка для Моб" src="data:image/gif;base64,R0lGODlh6gDqAIAAAP///wAAACH5BAEAAAEALAAAAADqAOoAAAL+jI+py+0Po5y02ouz3rz7D4biSJbmiabqyrbuC8fyTNf2jef6zvf+DwwKh8Si8YhMKpfMpvMJjUqn1Kr1is1qt9yu9wsOi8fksvmMTqvX7Lb7DY/L5/S6/Y7P6/f8vv8PGCg4SFhoeIiYqLjI2Oj4CBkpOUlZaXmJmam5ydnp+QkaKjpKWmp6ipqqusra6voKGys7S1tre4ubq7vL2+v7CxwsPExcbHyMnKy8zNzs/AwdLT1NXW19jZ2tvc3d7f0NHi4+Tl5ufo6err7O3u7+Dh8vP09fb3+Pn6+/z9/v/w8woMCBBAsaPIgwocKFDBs6fAgxosSJFCtavIgxo8Y9jRw7evwIMqTIkSRLmjyJMqXKlSxbunwJM6bMmTRr2ryJM6fOnTx7+vwJNKjQoUSLGj2KNKnSpUybOo1UAAA7" alt="Электросамокаты в Санкт-Петербурге" width="" height="">

{/if}

Но мне необходимо добавить еще промежуточный формат для планшетов. Как это сделать? Пытался убрать условие 

{if !$wa->isMobile()}

  и сделать через стили типа @media (max-width:767px){.mb-hide,.tabdeskonly{display:none!important}} , но почему-то выводится только первая картинка на любом из разрешений. 

Так же хотелось бы задать конкретные 

width="" height=""

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

Собственно, как мне правильно реализовать чтоб на разных разрешениях выводилась необходимая картинка? 

1 ответ

  • 1
    Эрик Webasyst 3 августа 2022 11:47 #

    Если вы ещё не нашли ответ на свой вопрос, подробную поддержку по редактированию исходного кода программных продуктов вы также можете получить от партнёров Webasyst.

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите