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

[Esox]

Добрый день.

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

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

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

Спасибо.

 

[theRGD]

5 минут назад, Esox сказал:

Добрый день.

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

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

[Esox]

9 часов назад, theRGD сказал:

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

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

 

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

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

 

Я сделал так:
 

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

              </div>

 

Правильно?

Змінено 17 грудня 2017 користувачем Esox

[Dotrox]

13 минут назад, Esox сказал:

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

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

max-width: 100%;

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

[Esox]

38 минут назад, Dotrox сказал:

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

max-width: 100%;

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

 

max-width: 100%;

 

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

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

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

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

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

[Dotrox]

17 минут назад, Esox сказал:

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

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

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

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

[theRGD]

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

 

[Esox]

Спасибо вам.

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

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

 

[Esox]

12 минут назад, theRGD сказал:

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

 

 

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

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