我如何让3张图片适合整个屏幕？

问题描述：

我得到了以下问题：我试图在我的整个屏幕中放入3张图片。每个图像应该是在33％的宽度和中心（即仅在图像的中心被显示。）这是我的代码：我如何让3张图片适合整个屏幕？

<div class="fluid-container"> 
    <div class="row"> 
    <div class="col-xs-4"> 
    <img src="images/skills.jpg" alt="Bitte benutze einen anderen Brwoser"> 
    </div> 

    <div class="col-xs-4"> 
     <img src="images/kontakt.jpg" alt="Bitte benutze einen anderen Brwoser"> 
    </div> 

    <div class="col-xs-4"> 
    <img src="images/lebenslauf.jpg" alt="Bitte benutze einen anderen Brwoser"> 
    </div> 
    </div>

CSS

img {background-size: cover; background-repeat: no-repeat;}

尝试IMG {有：100％;} – Chiller

这不工作 –

尝试加入'在img标签 –

答

他们AREN” t背景图像，所以背景造型将无法使用，而不是在列内使用标签，为每个列提供列ID和背景图像，然后您可以参考w3schools等所有背景样式方法并玩耍。

答

请看看 http://codepen.io/santoshkhalse/pen/QGrrBz

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 

 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 
<div class="fluid-container"> 
 
    <div class="row"> 
 
    <div class="col-xs-4"> 
 
    <div class="row"> 
 
    <img src="https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg" alt="Bitte benutze einen anderen Brwoser"class="img-responsive"> 
 
    </div> 
 
</div> 
 
    <div class="col-xs-4"> 
 
    <div class="row"> 
 
     <img src="http://www.intrawallpaper.com/static/images/518164-backgrounds.jpg" alt="Bitte benutze einen anderen Brwoser"class="img-responsive"> 
 
</div> 
 
</div> 
 
    <div class="col-xs-4"> 
 
    <div class="row"> 
 
    <img src="https://static.vecteezy.com/system/resources/previews/000/106/719/original/vector-abstract-blue-wave-background.jpg" alt="Bitte benutze einen anderen Brwoser" class="img-responsive"> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    </div>

.IMG-responsive'引导类这看起来更好迄今为止比我的。还有一个问题，我如何获得屏幕的整个高度。（它应该是响应）高度100％不起作用 –

答

@Erwin伊万诺夫您想添加响应自举类为不同的设备。请检查下面的代码是：

<div class="fluid-container"> 
 
    <div class="row"> 
 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
 
    <img src="images/skills.jpg" alt="Bitte benutze einen anderen Brwoser" class="img-responsive"> 
 
    </div> 
 

 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4"> 
 
     <img src="images/kontakt.jpg" alt="Bitte benutze einen anderen Brwoser" class="img-responsive"> 
 
    </div> 
 

 
    <div class="col-lg-4 col-md-4 col-sm-4 col-xs-4" > 
 
    <img src="images/lebenslauf.jpg" alt="Bitte benutze einen anderen Brwoser" class="img-responsive"> 
 
    </div> 
 
    </div>

我如何让3张图片适合整个屏幕？

相关推荐