我如何讓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;}

來源

2016-12-07 Erwin Ivanov

嘗試IMG {有：100％;} – Chiller

這不工作 –

嘗試加入'在img標籤 –

他們AREN」 t背景圖像，所以背景造型將無法使用，而不是在列內使用標籤，爲每個列提供列ID和背景圖像，然後您可以參考w3schools等所有背景樣式方法並玩耍。

來源

2016-12-07 10:23:07 Keydose

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

來源

2016-12-07 10:27:31

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

來源

2016-12-07 10:29:35 sanjay

我如何讓3張圖片適合整個屏幕？

回答

相關問題