如何在 Bootstrap 的容器內設置（頁面的）100% 寬度的圖像？

Question

我在 (Bootstrap) 容器中有一個圖像，我希望圖像是頁面的 100% 寬度。 我不能把它帶到容器外面，也不能去掉容器的填充（因為圖像周圍的文字）。

我發現我可以給圖像position: absolute ，但是我在圖像上有字幕，當我這樣做時，字幕將不再位於它上面。

是否有其他解決方案可以強制圖像“忽略”其內部容器的填充？

編輯：

 .cooking { width: 421px; border: 0px solid; border-color: #779a0b; border-top-width: 20px; margin-top: 8px; } @media(max-width: 768px){ .cooking { margin-left: -15px; margin-right: 15px; width: 787px; } }

 <div class="container"> <div class="row"> <div class="col-md-7"> <p> some text </p> </div> <div class="col-md-5 test"> <img src="img/studenten-breiter.jpg" alt="Studenten beim Kochen" class="img-responsive cooking"> <div class="img-titel"> <p> subtitles </p> </div> </div> </div> <--! some more stuff --> </div>

Answer 1

我正在回答您關於“圖像為頁面 100% 寬度”的問題。

您已將圖像包含在<div class="col-md-5"> ，這意味着圖像將僅占據 12 部分中屏幕網格系統中的 5 部分，不會占據頁面寬度的 100%。

請參閱Bootstrap 網格系統

此外，您還為具有{width: 421px}的圖像<img class="cooking">寬度提供了固定值。

請更改<div class="cooking">的{width:100%;}並將您的圖像包含在<div class="col-md-12"以占據頁面的整個寬度。

Answer 2

這必須工作：

class: alignfull和class: img-fluid會發揮作用。

    <div class="alignfull">
                          
         <img class="img-fluid" style="background-size: cover;
                                       background-position: center; 
                                       background-repeat: no-repeat;
                                       height: auto;
                                       min-width: 100%; 
                                       width: -moz-available;" 
         src="{{ $image->image }}" alt="An image">

   </div>