如何在有限宽度的容器内以及边栏旁边制作完整的页面/窗口宽度图像？

Question

我需要在bootstrap的容器中制作图像。 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编码。 我建议您使用CSS的@mediaQuery。 它将根据屏幕尺寸为您提供图像响应支持。

-在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中使用上述代码的结果。 您可以看一下响应结果中的外观。

-随时提出更多疑问。 谢谢！