我正在寻找使这些图片都是完全相同的大小，并保持按钮内联

设计一个真正简单的网站，我试图让这些专栏高度，按钮位置和图像尺寸完美。有什么建议么？我正在寻找使这些图片都是完全相同的大小，并保持按钮内联

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

我不知道如何让容器的底部是所有在同一行，但也确保了图像相应填补了集装箱的量相同。

来源

2017-05-27 loop13side7

一种方法是给图像容器div一定的高度和宽度，并使用图像作为各自div的背景图像。这将有助于您正确定位图像，而不考虑其长宽比。

这就是我想说的，更新您的略图类

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

然后更新HTML这样

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

，并把下面的各个缩略图的div您的按钮。

这里是更新codepen

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

来源

2017-05-27 09:06:49 Vibhanshu

我正在寻找使这些图片都是完全相同的大小，并保持按钮内联

回答

相关问题