How to make full page/window width image inside limited width container and next to sidebar?

Question

I need to make an image inside bootstrap's container. Image in div .full-image should be from the left to the right browser window. I know how to make it in single container, but in this example I have a menu left sidebar that is must to be. I need help with javascript/jquery script. Script should read the size of the browser window and keep the picture all the time on the left and right side of the window when the window reduces size(for mobiles, tables etc) and be full responsive.

 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

To show your image based on your screen size don't bother too much with CSS coding. I would suggest you, use @mediaQuery of CSS. It would provide your image responsive support according to screen size.

-- Add below like code in your CSS and you will find your images responsive according to your screen size. You can enhance according to your requirements further. I feel this would be the best way to acquire responsiveness for your page.

@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;
   }
  }

-- I am attaching a outcome of using above code in your CSS. How it will look like in responsive outcome you can take a look.

-- Feel free to ask further queries. Thanks!