中央画像グループ

-1

私はアルバム画像グループを作ろうとしてきましたが、右側に大きなギャップがあり、パディングを使用しなければフィットしませんが、パディングを使用するときは自分のPC解像度に合っています他の解像度ではより大きなギャップになります。また、他の画像より解像度の高い画像がある場合は、メインサイズのサイズを変更しません。多くの方法を試しましたが、高さを変えなければならないのは分かりません。と幅。あなたがブートストラップを使用していることが表示されますhttp://codepen.io/cbgraphics/pen/GrMYKQ 中央画像グループ

はあなたのコードを見て：

<!DOCTYPE html> 
<html lang="en"> 

<head> 
    <meta charset="UTF-8"> 
    <title>Document</title> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
    <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
</head> 

<body> 
    <div class="cards-deck"> 
     <div class="row"> 
      <div class="col"> 
       <div class="card"> 
        <div class="card-block"> 
         <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid"> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col"> 
      <div class="card"> 
       <div class="card-block"> 
        <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid"> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
     <div class="col"> 
      <div class="card"> 
       <div class="card-block"> 
        <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid"> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
     <div class="col"> 
      <div class="card"> 
       <div class="card-block"> 
        <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid"> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
     <div class="col"> 
      <div class="card"> 
       <div class="card-block"> 
        <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid"> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
     <div class="col"> 
      <div class="card"> 
       <div class="card-block"> 
        <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid"> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
     <div class="col"> 
      <div class="card"> 
       <div class="card-block"> 
        <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid"> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 
    <div class="row"> 
     <div class="col"> 
      <div class="card"> 
       <div class="card-block"> 
        <img src="http://www.publicdomainpictures.net/pictures/90000/t2/csx-train.jpg" alt="" class="img-fluid"> 
       </div> 
      </div> 
     </div> 
    </div> 
    </div> 

    <style> 
     .card-block { 
      display: flex; 
      align-items: center; 
      padding: 16px; 
     } 

     .card { 
      background-color: transparent; 
      border-width: 0px; 
     } 

     .row { 
      float: left; 
     } 
    </style> 
</body> 

</html>

他のデバイスは、 https://i.imgur.com/U2LtbFN.jpg

出典

2017-01-26 J. 4RK

コードの表示を見てください。あなたが利用していないタグがいくつか組み込まれています。

私は、あなたのコードに少し微調整を加えて同様のレイアウトを作り直しました。

まず - あなたはコンテナクラスであなたのコンテンツをラップする必要があります。 <div class="container">

第二 - あなたが、列のdiv内の各カードを置けば良いです。これらは、自動的に画像のサイズがすべて同じであると仮定して（あなたの列に記入します<div class="col-md-3">

サード - 。私は一貫性のグリッド間隔を保つためにパディングを変更

あなたは新しいを作成する必要はありません。各画像の行ブートストラップを使用している現在の方法は、それは素晴らしい作るデフォルトの機能やCSSを上書きしようとしているブートストラップグリッドシステムに関する

より：。。http://getbootstrap.com/css/#grid

出典

2017-01-26 22:02:35

あなたの再構築されたバージョンは、本当に今の私にすべてをクリア、ありがとうございました。 - すべての画像を同じサイズにする方法？時々、画像は12pxまたは17px高さで\ widthよりも大きくなります\ width、md \ llg \ smなしで（col）を使用するだけですか？または特定の方法がありますか？私はカードブロックのresを変更しようとしましたが、正しく動作しませんでした。 –

私よりもはるかに賢い人は、すべての画像を切り抜いて正方形にする方法を考え出しました。あなたが望むならば、あなたは異なるサイズを得るために比率を変えることができると確信しています。更新されたコード：http://codepen.io/cbgraphics/pen/bgQqXK –

答えて

関連する問題