Member 8057273 Ответов: 2

Div и изображения не реагируют


Веб-сайт: showdeal.in у меня есть статический баннер от snapdeal, но баннер выбегает из своей контейнерной коробки. Статический баннер-это javascript с фиксированной высотой и шириной, упомянутыми в нем. Вот код:
<div class="col-lg-4 col-md-4">
    <div class="panel panel-primary">
        <div class="panel-heading">TITLE</div>
        <div class="panel-body">
            <div data-SDID="someidhere"  data-identifier="SnapdealAffiliateAds" data-height="auto" data-width="auto" >
            </div><script async id="snap_zxcvbnhg" src="https://affiliate-ads.snapdeal.com/affiliate/js/snapdealAffiliate.js"></script>
        </div>
    </div>
</div>

Я использовал следующий jquery в разделе head (также попробовал его после body), чтобы добавить адаптивные классы к изображению, которое я получаю от snapdeal:
<script>
    $(document).ready(function() 
    {
        $("img").addClass("img");
        $("img").addClass("img-responsive");
    });
</script>

но никаких чудес. Пожалуйста помочь.

Что я уже пробовал:

статическая ширина изображения, автоматическая ширина и автоматическая высота изображения и отзывчивость изображения.
На самом деле вид в мобильном телефоне прекрасный, но на ноутбуке плитки выходят из контейнера. Я попробовал auto вместо fix width, но это не сработало, потому что скрипт переопределяет размеры во время выполнения. пожалуйста, смотрите вид-источник showdeal.in для визуализированного результата.

Suvendu Shekhar Giri

Может разместить код в jsfiddle.net?

2 Ответов

Рейтинг:
2

Richard Deeming

Взгляните на сценарий, на который вы ссылаетесь. Это не создает <img>; это создает <iframe>.

HTML тег iframe[^]

CSS во внешнем документе не влияет на стили, применяемые к документу, размещенному в <iframe> элемент.

Лучшее, что вы можете сделать, это использовать Bootstrap Адаптивное Встраивание[^] классы для обеспечения того, чтобы <iframe> изменяет размер, чтобы соответствовать доступному пространству. То, как встроенный документ реагирует на это, находится вне вашего контроля.

Также обратите внимание, что скрипт, на который вы ссылаетесь, добавляет "px" до самого конца data-width и data-height атрибуты, так определяющие "auto" это не сработает. Если вы посмотрите в инструменты разработчика Вашего браузера, вы, вероятно, увидите ошибку, зарегистрированную из внешнего скрипта.


Рейтинг:
0

CanniDanny

Привет,

Почему вы добавляете отзывчивый класс через jquery? Просто имейте класс, назначенный элементу в качестве стандарта:

<img class="img-responsive" src="#">

Это устанавливает 100% ширину и автоматическую высоту изображения. Я бы также проверил, чтобы убедиться, что у вас нет другого CSS, перезаписывающего вышеизложенное.

Надеюсь, это поможет.