HTML – 如何保持响应图像相同的高度?

前端之家收集整理的这篇文章主要介绍了HTML – 如何保持响应图像相同的高度?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个我正在制作的网页,我有一排带有封面照片和个人资料图片并排.我把它们都放在不同大小网格的引导行中.但是,个人资料图片总是低于封面照片(它的高度更大).我如何让他们保持敏感,但高度相同?我的最终目标是让它们看起来像一个单独的条带(两者之间有填充),然后在窗口是移动大小时堆叠.
<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>

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

解决方法

使用最小高度

尝试

img {
min-height:100%
}

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

img {
min-height:4em;
}

猜你在找的HTML相关文章