Как сделать картинку или блок адаптивным в open cart 2?

Question

[CREV]

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

Answer 1

[one_day]

Пропишите класс к имг img-responsive:

<img class="img-responsive" src="img.jpg" alt="img">

Comments

[CREV]

Сработало, к видео так же ?

[one_day]

CREV:

<!-- 16:9 соотношение сторон -->
<div align="center" class="embed-responsive embed-responsive-16by9">
    <video autoplay loop class="embed-responsive-item">
        <source src="hvideo.mp4" type=video/mp4>
    </video>
</div>

<!-- 4:3 соотношение сторон -->
<div align="center" class="embed-responsive embed-responsive-4by3">
    <video autoplay loop class="embed-responsive-item">
        <source src="hvideo.mp4" type=video/mp4>
    </video>
</div>

[one_day]

<td><br><div align="center" class="embed-responsive embed-responsive-16by9">
<iframe src="//www.youtube.com/embed/T7hWbE7ttEc" width="550" height="360" frameborder="0" style="background-color: transparent;"></iframe>
</div>
</td>

[CREV]

one_day: Идеально !!! Огромнешее спасибо вам за ваше внимание к моей задаче, ваш ответ мне очень помог и прекрасно решил вопрос

Answer 2

[Павел]

Идете и смотрите документацию по бутстрапу
В бутстрапе нет стилей для адаптивных видео, но легко гуглится по запросу responsive video css, один из вариантов тут

Comments

[CREV]

Я чайник, мой кусок кода видео


какой код добавить, чтобы оно тоже было резиновым как и картинка ? Понимаю, вам надоели подобные вопросы от таких троянов как я, но я буду благодарен вам за помощь

[CREV]

<td><br><div style="text-align: center;"><iframe src="//www.youtube.com/embed/T7hWbE7ttEc" width="550" height="360" frameborder="0" style="background-color: transparent;"></iframe></div>