如何保持响应图像相同的高度？ [英] How to keep responsive images same height?

问题描述

我有一个我正在制作的网页，并且我有一排并排封面照片和个人资料照片。我将它们放在不同大小的网格中的引导行中。但是，个人资料图片总是低于封面照片（高度较大）。我如何让他们响应，但高度相同？我的最终目标是让它们看起来像一个单条（在两者之间填充），然后在窗口移动大小时堆叠。

 < div class =row> 
< div class =col-lg-8> 
< img src =http://placehold.it/851x315class =img-responsivealt =封面照片> 
< / div> 
< div class =col-lg-4> 
< img src =http://placehold.it/200x200class =img-responsivealt =个人资料图片> 
< / div> 
< / div> 
  

我尝试限制行div的高度，将其设置为特定高度，然后切换自举网格将以不同的比例进行组合或拼凑。任何智慧都是非常值得赞赏的。

解决方案

使用min-height

<

$ p $ img {
最小高度：100％
}


code>

如果不行，请使用固定的最大高度

  img {
 min-height：4em; 
} 
  

I have a webpage that I'm making, and I have one row with a cover photo and profile picture side-by side. I have them both in a bootstrap row in different-sized grids. But, the profile picture is always extending lower than the cover photo (it's height is larger). How do I keep them responsive, but the same height? My ultimate goal is have them look like a single strip (with padding between), and then stack when window is mobile-sized.

<div class="row">
                    <div class="col-lg-8">
                    <img src="http://placehold.it/851x315" class="img-responsive" alt="Cover Photo">
                    </div>
                    <div class="col-lg-4">
                    <img src="http://placehold.it/200x200" class="img-responsive" alt="Profile Picture">
                    </div>
                </div>

I have tried restricting the height of the row div, setting it to a specific height, and switching up the bootstrap grid to be col-md, or col-sm in different proportions. Any wisdom is much appreciated.

解决方案

use min-height on them

try

img {
min-height:100%
}

if that doesn't work use a fixed max-height

img {
min-height:4em;
}

这篇关于如何保持响应图像相同的高度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！