как сделать так, чтобы логотип вашего сайта был адаптивным? - PullRequest
Новая
       8

как сделать так, чтобы логотип вашего сайта был адаптивным?

0 голосов
/ 24 декабря 2018

Я установил максимальную ширину моего логотипа на 112, и он идеально подходит для настольных компьютеров, а для мобильной версии - нет.вот ссылка моего сайта http://mediagrafter.com/logistics/#?

Я пытался уменьшить оставленное поле, но в мобильной версии это не корректируется (отзывчиво). 

<code><pre>
    <img src="wp-content/uploads/2018/09/logo.png" alt="" style="
        max-width: 112%;
    ">

Я хочу, чтобы логотип отображался в мобильном представлении (отзывчиво), но на нем отображается половина логотипа.

Ответы [ 2 ]

0 голосов
/ 24 декабря 2018

Сначала попробуйте это: 

<code><pre>
    <img src="wp-content/uploads/2018/09/logo.png" alt="" style="
        device-width;
    ">

Или добавьте в раздел <head> вашего документа определенный метатег: 

<meta name="viewport" content="width=device-width, initial-scale=1">

Также, еслиэто не работает, добавьте в таблицу стилей css следующее: 

@-ms-viewport{ width: device-width; }

прочтите это для получения дополнительной информации

https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

0 голосов
/ 24 декабря 2018

Полагаю, вы можете установить ширину на 100%, а затем установить для свойства object-fit значение , содержащее

Другая идея - установить 

{ width: 100%, height: auto; }
...