Question

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

<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。任何智慧都非常感激。

Answer 1

使用min-height

尝试

img {
min-height:100%
}

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

img {
min-height:4em;
}

Answer 2

您可以使用以下代码。

<强> HTML

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

<强> CSS

/* Desktop and Tablet Screens */
@media (min-width:768px) {
    .cover-row {
        position: relative;
        min-height: 100px; /* minimum height of cover stripe */
    }
    .profile-wrap {
        position: absolute;
        right: 0;
        top: 0;
        height: 100%;
        overflow: hidden;
    }
    .profile-pic {
        width: auto; /* maintain width/height aspect ratio */
        height: 100%;
    }
}

JSFiddle链接http://jsfiddle.net/feh4ex3p/

Answer 3

以上都不适合我，但是这样做了：

<强> HTML

.profile-pic {
    width: 100%; /* maintain width/height aspect ratio */
    height: 500px; /*I realized this doesnt seem responsive, but no percentages work for me but it appears fine on mobile*/
}

<强> CSS

copyToRealm()

如何保持响应图像相同的高度？

3 个答案: