如何在有限寬度的容器內以及邊欄旁邊制作完整的頁面/窗口寬度圖像？

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中使用上述代碼的結果。 您可以看一下響應結果中的外觀。

-隨時提出更多疑問。 謝謝！