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>