如何在有限宽度容器内和边栏旁边制作全页/窗口宽度图像？

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 中使用上述代码的结果。你可以看看它在响应式结果中的样子。

-- 随意询问进一步的问题。谢谢！