Question

我試圖利用引導等頂級覆蓋兩個圖像，如下面的代碼：

<div class="row"> 
     <div class="col-lg-8 col-md-8 col-sm-12 col-md-offset-2 col-lg-offset-2" style="border:solid 1px black"> 
      <div style='position: relative; width:100%; height:100%; background:center; border:solid 1px red'> 
       <img src="Images/banner-transparente.jpg" class="img-responsive" /> 
       <div style='position: absolute; width: 100%; height: 100%; top: 20%; border:solid 1px black'> 
        <img src="Images/logo-trt-home.png" class="img-responsive" /> 
       </div> 
      </div> 
     </div> 
    </div> 

結果是OK當屏幕處於大規模：

但是，當在小屏幕上，圖像被裁剪。

我如何能做到用引導的網格系統，使用所需圖像的響應？在http://jsfiddle.net/s116Ld99/5/

Answer 1

我嘗試下面的代碼：

<div class="row"> 
     <div class="col-lg-8 col-md-8 col-md-offset-2 col-lg-offset-2" style="border:solid 1px black"> 
      <div style="background-image:url('Images/banner-transparente.jpg'); border: solid 1px green"> 
       <img src="Images/logo-trt-home.png" class="img-responsive" /> 
      </div> 
     </div> 
    </div> 

它完美！

[1] https://jsfiddle.net/bwth52ft/

Answer 2

碼我會做第一個圖像的背景圖像。把位置：絕對的標誌會讓它忽略它的容器。

未完全完成，但更接近：http://jsfiddle.net/s116Ld99/7/

<div style="background-image:url('http://files.intersu.webnode.pt/200000002-a2450a33fe/bannerB[1].jpg'); background-repeat: no-repeat; background-size: 100% auto; border:solid 1px green"> 
    <img src="https://eloconcursos.com.br/imagem/59954926655ae736857b696.73701051.jpg/167/200/4:3" class="img-responsive" /> 
</div> 

Answer 3

問題：圖像的父的寬度是固定的，其從所述圖像獲取。當您調整窗口大小時，它不會更改，因此圖像在小屏幕中很大。

您可以將width（百分比）添加到圖像容器。最好通過css媒體查詢以一定的寬度進行。

Jsfiddle

<div style=" width:20%;position: absolute; top: 20%; border:solid 1px yellow"> 
        <img src="https://eloconcursos.com.br/imagem/59954926655ae736857b696.73701051.jpg/167/200/4:3" class="img-responsive" /> 
       </div>