これらの写真をすべて同じサイズにしてボタンをインラインに保つことを考えています

Question

本当のシンプルなウェブサイトをデザインしています。これらの高さ、ボタンの配置、画像のサイズを完璧にしようとしています。助言がありますか？

https://codepen.io/Smag15/pen/XRQLdB

<div class="row"> 
      <div class="col-md-4 col-sm-12"> 
       <a href="https://localbitcoins.com/?ch=bef7"> 
        <div id="buytn" class="thumbnail"> 
         <img src="http://www.forexnewsnow.com/wp-content/uploads/2016/10/Bitcoin.jpg"></img> 
         <div id="buy" class="caption"> 
          <h2>Buy Bitcoin</h2> 
         </div> 
        </div> 
       </a> 
      </div> 
      <div class="col-md-4 col-sm-12"> 
       <a href="https://www.genesis-mining.com/a/18691"> 
        <div id="minetn" class="thumbnail"> 
         <img src="http://2.bp.blogspot.com/-uK7LaDSSyFE/Vhi2nrCu5iI/AAAAAAAAGE0/2Ht-q9oYO24/s1600/Bitcoin-mining.jpg"></img> 
         <div id="mine" class="caption"> 
          <h2>Mine Bitcoin</h2> 
         </div> 
        </div> 
       </a> 
      </div> 
      <div class="col-md-4 col-sm-12"> 
       <a href="https://localbitcoins.com/?ch=bef7"> 
        <div id="spendtn" class="thumbnail"> 
         <img src="http://insidebitcoins.com/wp-content/uploads/2015/06/Shapeshift_article_cover_Bitcoinist.png"></img> 
         <div id="spend" class="caption"> 
          <h2>Trade Bitcoin</h2> 
         </div> 
        </div> 
       </a> 
      </div> 
     </div> 
    </div> 
</div> 

.jumbotron { 
    text-align: center; 
    color: white; 
    background: #09f; 
    text-shadow: 1px 1px 1px black; 
} 

#price{ 
    background: silver; 
    margin-bottom: 20px; 
} 

.row { 
    text-align: center; 
    display: flex; 
    flex-wrap: wrap; 
    text-transform: uppercase; 
} 

私は、容器の底部は、同じライン上のすべてのように取得するかどうかはわかりません、まだまた、画像はそれに応じてコンテナの同じ量を埋めることを確認してください。

Answer 1

イメージコンテナdivに特定の高さと幅を与え、画像をそれぞれのdivの背景イメージとして使用する方法もあります。これは、アスペクト比に関係なく、画像を適切に配置するのに役立ちます。

これは、私が言うことをしようとしていますものです、あなたのthumnailクラスは、この

<div id="minetn" class="thumbnail" style="background-image: url('http://2.bp.blogspot.com/-uK7LaDSSyFE/Vhi2nrCu5iI/AAAAAAAAGE0/2Ht-q9oYO24/s1600/Bitcoin-mining.jpg')"></div> 

のようなあなたのhtmlを更新し、それぞれのサムネイルのdivの下にあなたのボタンを配置すると

.thumbnail { 
    width: 100%; 
    height: 150px; 
    background-size: cover; 
    background-repeat: no-repeat; 
} 

更新します。ここで

は

https://codepen.io/vibhanshu/pen/xdeoqM

codepen更新されます