如何在不同的两列大小的引导程序中相等图像高度 [英] How to equal images height in bootstrap different two column size

查看:208
本文介绍了如何在不同的两列大小的引导程序中相等图像高度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用两个不同的引导网格列,但是网格中的图像高度不相等.如果我固定好高度图像,看起来就拉长了.请在下面查看我的代码:

I'm using two different bootstrap grid columns but images height are not equal in the grid. If i fixed the height images look stretched. Please see below my code:

         <div class="row">
              <div class="col-md-8 " >
                 <img class="img-responsive" src="images/green.jpg">
              </div>
              <div class="col-md-4" >
                 <img class="img-responsive" src="images/green.jpg">
              </div>
         </div>

下面我得到的结果

如何在不拉伸的情况下使两个图像高度相等.谢谢

how can equal both images height without stretched. Thanks

推荐答案

为每个具有静态高度和可变宽度的图像创建一个包含分隔线的分隔线.然后,您可以使用background-image和background-size:cover.示例:

Create a containing divider for each image which will have a static height and a variable width. You can then use background-image and background-size: cover. Example:

.image-container{
 height: 500px;
 width: 100%;
 background-size: cover;
}

然后对于HTML,请尝试以下操作:

And then for HTML try the following:

    <div class="row">
          <div class="col-md-8 " >
             <div class="image-container" style="background-image: url('images/green.jpg');">
             </div>
          </div>

          <div class="col-md-4" >
             <div class="image-container" style="background-image: url('images/green.jpg');">
             </div>
          </div>
     </div>

这篇关于如何在不同的两列大小的引导程序中相等图像高度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆