首页 > 其他 > 详细

宽高不统一的图片不出现拉升做到等比缩放

时间:2020-03-24 14:52:27      阅读:70      评论:0      收藏:0      [点我收藏+]
<template>
    <div>
        <div style="font-size: 0;">
            <div class="img-box" v-for="(item,i) in list" :key="i">
                <div class="img-bg-box">
                    <!-- 占位图 -->
                    <img class="seize-seat-img" src="data:image/png;base64,/9j/4AAQSkZJRgABAQIAJQAlAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAChARIDASIAAhEBAxEB/8QAFQABAQAAAAAAAAAAAAAAAAAAAAf/xAAUEAEAAAAAAAAAAAAAAAAAAAAA/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/xAAUEQEAAAAAAAAAAAAAAAAAAAAA/9oADAMBAAIRAxEAPwC2gIoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD//Z">
                    <div class="cover-bg dis-flex-center">
                        <!-- 需要等比缩放显示的图 -->
                        <img :src="item.pic" class="img-bg">
                    </div>
                    <div class="duration-value">{{ item.durationValue }}</div>
                </div>
                <div>
                    <div class="camera-name over_elips">{{item.name}}</div>
                    <div class="people-num">查看:{{item.personCount}}<span class="agree-with">点赞:{{item.praiseCount}}</span></div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            list: []
        }
    }
}

</script>
<style lang="scss" scoped>
    .img-box{
        width: 25%;
        display: inline-block;
        padding: 0 10px;
        .img-bg-box{
            cursor: pointer;
            font-size: 0;
            margin-top: 20px;
            text-align: center;
            position: relative;
            .seize-seat-img{
                width: 100%;
                height: 100%;
            }
            .cover-bg{
                position: absolute;
                top: 0;
                left: 0;
                z-index: 6;
                width: 100%;
                height: 100%;
                overflow: hidden;
                .img-bg{
                    max-height: 100%;
                    max-width: 100%;
                    border-radius: 4px;
                }
            }
            .duration-value{
                position: absolute;
                right: 10px;
                bottom: 10px;
                z-index: 10;
                font-size: 16px;
            }
        }
    }
</style>

 

宽高不统一的图片不出现拉升做到等比缩放

原文:https://www.cnblogs.com/lijh03/p/12558191.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!