1)先上效果圖

image.png

2)代碼塊

<template>
    <div class="mystar">
        <div class="list">
            <div class="item">
                <div class="info">
                    <div class="title">
                        內(nèi)容去啊大撒大撒大撒阿三打撒收阿斯頓奧收啊
                    </div>
                    <div class="bottom"> 
                        <span> 我爸是李剛 </span> 
                        <span> 52 </span> 
                    </div>
                </div>
                <img src="../assets/gougou.jpg" />
            </div>
        </div>
    </div>
</template>

<script>
</script>

<style lang="less" scoped>
    .item{
        padding: 10px;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        .info{
            flex: 1; // 讓所有的盒子下的元素都有相同的長度
            //設(shè)置兩個div上下
            display: flex;  //使用flex布局
            flex-direction: column;  // 使用豎直方向
            justify-content: space-between; //改成豎直排列
            .title{
                font-size: 16px;
            }
            .bottom{
                font-size: 12px;
                color: #ccc;
                span{
                    margin-right: 12px;
                }
            }
        }
        img{
            width: 120px;
            height: 80px;
            display: block;
            object-fit: cover;  //定義長寬后可以等比例放置
        }
    }
</style>

總結(jié)

1.object-fit: cover; 屬性值表示可以讓圖片等比例放置，防失真。
2.希望此教程可以幫助到你們。???