基于静态图像高度

Question

因此，对于每条消息，我希望在左侧显示个人资料图片，然后在其旁边显示用户名和消息。这有效，但我希望图像始终是正方形，无论屏幕尺寸如何都保持相同的大小。

所以我为每条消息制作一行，然后将图像设为1列，将消息设为其他11列。如果我希望图像的大小为40x40像素，我怎样才能使每行的高度始终至少为图像的高度。

 messages.forEach(function(message){
            $chatbox.prepend(
                    "<div class = 'member-message row'>" +
                        "<img src ="+ member_pics[message.creator]+" class= 'profile-img col-xl-1 col-lg-1 col-md-1 col-sm-1 col-xs-1'>"
                        + "<div class = 'col-xl-11 col-lg-11 col-md-11 col-sm-11 col-xs-11'> <b>" +  message.creator + ": </b>" + message.content + "<br/>" +
                        "</div>" +
                    "</div>" );
        });

现在，它将图像作为行的高度，即使我有css

.profile_img{
    width: 40px;
    height: 40px;
}

Answer 1

看起来col-*-1类正在添加正确的＆amp;左边填充到那个单元格。尝试删除添加了profile-img的列的填充。