图片不变形的一种css写法

最新推荐文章于 2024-05-13 10:29:58 发布

iiiilooaixuud

最新推荐文章于 2024-05-13 10:29:58 发布

阅读量149

点赞数

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

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

版权

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

101 篇文章 3 订阅

订阅专栏

vue

91 篇文章 0 订阅

订阅专栏

效果图：

<template>
<div class="content">
<div class="big">
    <div class="inner">
        <a href="#">
            <img src="@/assets/image/research/card.png">
        </a>
    </div>
</div>
</div>
</template>
<script lang="ts" setup>
</script>
<style  lang="less">
.content{
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    height: 500px;
}
.big{
    margin: auto;
    width: 300px;
    height: 120px;
    display: flex;
    .inner{
        margin: 5px auto;
        background-color: #fff;
        width: 85%;
        display: inline-block;
        box-shadow: 0px 0px 10px 0px rgb(122 136 152 / 14%);
        a{
            display: flex;
            height: 110px;
            img{
                margin:0 auto;
            }
        }
    }
}
</style>