Перейти к содержанию
Esox

Адаптивное размещение jpg

Рекомендуемые сообщения

Добрый день.

Помогите адаптивно вставить иконки платежных систем в карточку товара.

Вставляемый jpg правильно отображается только на ПК.

На мобильных устройствах он вылетает за пределы вызывая горизонтальный скролинг.

Спасибо.

 

image.thumb.png.bd33ec487c62e76f05bd5bc0be0b97a2.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
5 минут назад, Esox сказал:

Добрый день.

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

либо на мелкие картинки покрашите и сверстайте. :wacko:

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
9 часов назад, theRGD сказал:

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

либо на мелкие картинки покрашите и сверстайте. :wacko:

 

Ну а все-таки, если масштабировать?

Я хотел попробовать, насколько будет читаемым....

 

Я сделал так:
 

              <div class="hidden-md-up">
                  <span>Принимаем к оплате:</span>
                  </br>
                  <img src="/image/payment/payment.png" width="450">

              </div>

 

Правильно?

Изменено пользователем Esox

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
13 минут назад, Esox сказал:

Ну а все-таки, если масштабировать?

Если хотите, чтоб картинка была адаптивной, не задавайте ей ширину, а поставьте

max-width: 100%;

Тогда она будет подстраиваться под родительский блок.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
38 минут назад, Dotrox сказал:

Если хотите, чтоб картинка была адаптивной, не задавайте ей ширину, а поставьте


max-width: 100%;

Тогда она будет подстраиваться под родительский блок.

 

max-width: 100%;

 

Никак не влияет.

Пробовал и после: 

<img src="/image/payment/payment.png" max-width: 100%;>

и в отдельный класс вынес.

результата нет.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
17 минут назад, Esox сказал:

<img src="/image/payment/payment.png" max-width: 100%;>

А где вы такое вообще видели? Атрибута max-width не существует, это можно добавлять только через стили.

И второе - у родительского блока должны быть размеры и ограничения содержимого.

Что-то конкретнее смогу подсказать только увидев сайт.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
<img src="/image/payment/payment.png" width="450" class="img-responsive" />

 

  • +1 1

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Спасибо вам.

Через стили тоже не получается.

Сайт на локалке ((.

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
12 минут назад, theRGD сказал:

<img src="/image/payment/payment.png" width="450" class="img-responsive" />

 

 

Замечательно!!!

Спасибо огромное, работает.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.