Question

我遇到了以下问题：我试图在我的整个屏幕上放入3张图像。每张图像的宽度应为33％并居中（仅显示图像的中心。）这是我的代码：

<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;}

Answer 1

它们不是背景图像，因此背景样式不起作用，而不是在列中使用标记，为每个列提供列ID和设置背景图像，然后您可以查询w3schools等所有背景样式方法和玩耍。

Answer 2

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

＆＃13;

<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>

＆＃13;

Answer 3

@Erwin Ivanov您可以为不同的设备添加响应式引导类。请检查以下代码：

<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张图像适合整个屏幕？

3 个答案: