css如何让页面logo图片不变形

最新推荐文章于 2024-06-20 18:12:03 发布

iiiilooaixuud

最新推荐文章于 2024-06-20 18:12:03 发布

阅读量220

点赞数

分类专栏：页面遇到的基础问题 css 文章标签： html 前端

本文链接：https://blog.csdn.net/qq_46617584/article/details/127220677

版权

页面遇到的基础问题同时被 2 个专栏收录

101 篇文章 3 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

效果：

<template>
<div class="logoStyle">
    <img :src="imgUrl">
    <div class="textIndex">{{textIndex}}</div>
</div>
</template>

 props:["imgUrl",'textIndex']

.logoStyle{
        width: 100%;
        margin-bottom: 35px;
        min-width: 1000px;
        position: relative;
    img{
            width: 100%;
            min-width: 1000px;
            height: 420px;
            object-fit:cover
        }
        .textIndex{
            position: absolute;
            color: #fff;
            font-size: 52px;
            top: 26%;
            left: 32%;
        }
}

图片重点加上： object-fit:cover;

文字是绝对定位