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

问题描述

我有一个正在制作的网页，我有一排并排显示封面照片和个人资料图片.我将它们都放在不同大小网格的引导行中.但是，个人资料图片总是比封面照片低(它的高度更大).我如何让它们反应灵敏，但高度相同?我的最终目标是让它们看起来像一个单一的条带(中间有填充)，然后在窗口为移动大小时堆叠.

<div class="col-lg-8"><img src="http://placehold.it/851x315" class="img-responsive" alt="封面照片">
<div class="col-lg-4"><img src="http://placehold.it/200x200" class="img-responsive" alt="个人资料图片">

我尝试限制行 div 的高度，将其设置为特定高度，并将引导网格切换为 col-md 或 col-sm 的不同比例.任何智慧都非常感谢.

解决方案

对它们使用 min-height

试试

img {最小高度:100%}

如果这不起作用，请使用固定的最大高度

img {最小高度: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屋！