Как сделать полное изображение ширины страницы / окна внутри контейнера ограниченной ширины и рядом с боковой панелью?

Question

Мне нужно сделать изображение внутри контейнера начальной загрузки.Изображение в div .full-image должно быть слева в правом окне браузера.Я знаю, как сделать это в одном контейнере, но в этом примере у меня есть левая боковая панель меню, которая должна быть.Мне нужна помощь с JavaScript / JQuery скрипт.Скрипт должен считывать размер окна браузера и постоянно сохранять изображение в левой и правой части окна, когда окно уменьшает размер (для мобильных телефонов, таблиц и т. Д.) И быть полностью отзывчивым.

img {
 max-width: 100%; /*bootstrap responsive images*/
 height: auto;
}

.full-image {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<div class='container'>
<div class='row'>
<div class='col-3'>
<ul>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
<li>menu-item</li>
</ul>
</div>
<div class='col-9'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula elit interdum, ultricies nisl. Pellentesque aliquam vulputate purus, sit amet ultricies nisi bibendum non. Ut lacinia, arcu ut hendrerit euismod, magna ligula dignissim sapien, vitae commodo mauris velit id elit. Maecenas eu porta quam. Vivamus mollis dolor et viverra ultrices. Ut vitae consequat sapien. Praesent vestibulum consequat nisi, at posuere sem maximus vel. Sed egestas, dui egestas ultrices lacinia, mi elit eleifend risus, vitae pulvinar felis magna eu libero. Etiam et massa purus. Phasellus hendrerit sit amet metus eget sodales.</p>
<img src='http://blogs.worldbank.org/africacan/files/africacan/small_better_small.jpg'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula </p>
<div class='full-image'>
<img src='http://upload.wikimedia.org/wikipedia/commons/b/b3/Campania_banner_View_from_Capri.jpg'>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam condimentum tempus tellus ac auctor. Phasellus sit amet elit bibendum, vehicula elit interdum, ultricies nisl. Pellentesque aliquam vulputate purus, sit amet ultricies nisi bibendum non. Ut lacinia, arcu ut hendrerit euismod, magna ligula dignissim sapien, vitae commodo mauris velit id elit. Maecenas eu porta quam. Vivamus mollis dolor et viverra ultrices. Ut vitae consequat sapien. Praesent vestibulum consequat nisi, at posuere sem maximus vel. Sed egestas, dui egestas ultrices lacinia, mi elit eleifend risus, vitae pulvinar felis magna eu libero. Etiam et massa purus. Phasellus hendrerit sit amet metus eget sodales.</p>
</div>
</div>
</div>

Answer 1

Чтобы показать ваше изображение в зависимости от размера экрана, не слишком беспокоитесь о CSS-кодировании.Я бы предложил вам использовать @mediaQuery из CSS.Это обеспечит поддержку ваших изображений в соответствии с размером экрана.

- Добавьте ниже подобный код в CSS, и вы увидите, что ваши изображения реагируют в соответствии с размером экрана.Вы можете улучшить в соответствии с вашими требованиями в дальнейшем.Я чувствую, что это был бы лучший способ получить отзывчивость для вашей страницы.

@media only screen and (max-width: 600px) {
    img {
        max-width: 100%; /*bootstrap responsive images*/
        height: auto;
       }

    .full-image {
        width: 100vw;
        position: relative;
        left: 50%;
        right: 50%;
        margin-left: -50vw;
        margin-right: -50vw;
   }
  }

- я прилагаю результаты использования вышеуказанного кода в вашем CSS.Как это будет выглядеть в отзывчивом результате, вы можете посмотреть.

- Не стесняйтесь задавать дополнительные вопросы.Спасибо!