如何使拍攝4張照片組合reponsive

，也應該響應，但我不能做到這一點需要幫助

這裏是我的源代碼：

 <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user scalable=no"> 
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 

     <style> 
      #img-one { 
      float: right; 
      } 

      #img-three { 
      float: right; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="Image-Section"> 
      <div id="img-one"> 
      <img src="one.jpg" alt="Image" class="img-responsive" width="631" height="390"> 
     </div> 

     <div id="img-two"> 
      <img src="two.jpg" alt="Image" class="img-responsive" width="631" height="390"> 
     </div> 

     <div id="img-three"> 
      <img src="three.jpg" alt="Image" class="img-responsive" width="631" height="390"> 
     </div> 

     <div id="img-four"> 
      <img src="four.jpg" alt="Image" class="img-responsive" width="631" height="390"> 
     </div> 
     </div> 

     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    </body> 
    </html>

我已經對準使用引導和css我的圖片，它也是responsiv Ë但它搞亂

來源

2015-11-25 RAP

歡迎SO！請創建一個小提琴http://jsfiddle.net/，以便我們可以看到演示 – Chris

，您可以複製並嘗試此代碼的完整代碼 – RAP

雖然它不完整，但您的圖像沒有完整路徑。 – JesseEarley

你可以試試這個，只是不是在CSS改變padding像我一樣，你應該在引導更改定製

演示：https://jsfiddle.net/2Lzo9vfc/173/

編輯：按鈕https://jsfiddle.net/2Lzo9vfc/175/

HTML

<div class="container text-center"> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <img src="http://placehold.it/700x400" alt="" class="img-responsive"> 
     </div> 
     <div class="col-sm-6"> 
      <img src="http://placehold.it/700x400" alt="" class="img-responsive"> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-sm-6"> 
      <img src="http://placehold.it/700x400" alt="" class="img-responsive"> 
     </div> 
     <div class="col-sm-6"> 
      <img src="http://placehold.it/700x400" alt="" class="img-responsive"> 
     </div> 
    </div> 
</div>

CSS

.col-sm-6 { 
    padding-left: 0; 
    padding-right: 0; 
}

來源

2015-11-25 11:46:40

非常感謝，但它的中心 – RAP

你不想被集中？ –

我想寬度100％，就像這樣http://i.stack.imgur.com/JnaGe.jpg – RAP

<meta charset="UTF-8"> 
 
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user scalable=no"> 
 
     <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
 

 
     <style> 
 
      #img-one { 
 
      float: right; 
 
      } 
 

 
      #img-three { 
 
      float: right; 
 
      } 
 
      .img-xxx{ 
 
       width: 631px !important; 
 
       height: 390px !important; 
 
       } 
 
     </style> 
 
    </head> 
 

 
    <body> 
 
     <div id="Image-Section"> 
 
      <div class="row"> 
 
      <div id="" class="col-sm-5"> 
 
       <img src="images/logo.png" alt="Image" class="img-responsive img-xxx" > 
 
     </div> 
 

 
     <div id="img-two" class="col-sm-5"> 
 
      <img src="images/man1.jpg" alt="Image" class="img-responsive img-xxx"> 
 
     </div> 
 
      </div> 
 
      <div class="row"> 
 
     <div id="" class="col-sm-5"> 
 
      <img src="images/man2.jpg" alt="Image" class="img-responsive img-xxx"> 
 
     </div> 
 

 
     <div id="img-four" class="col-sm-5"> 
 
      <img src="images/man3.jpg" alt="Image" class="img-responsive img-xxx"> 
 
     </div> 
 
      </div> 
 
     </div> 
 

 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
    </body> 
 
    </html>

試試這個

來源

2015-11-25 11:55:59

如何使拍攝4張照片組合reponsive

回答

相關問題