CSS 图片等比缩放和拉伸

一、代码

<template>
    <div>
        <!-- 等比缩放 -->
        <div>            
            <div class="img-div">
                <img class="img-01" src="@images/image02.jpg" >
            </div>        
            <div class="img-div">
                <img class="img-01" src="@images/image01.jpg" >
            </div>
        </div>
        <!-- 平铺占满 -->
        <div>
            <div class="img-div">
                <img class="img-02" src="@images/image01.jpg" >
            </div>
            <div class="img-div">
                <img class="img-02" src="@images/image02.jpg" >
            </div>
        </div>
    </div>
</template>
<style scoped>
.img-div {
    margin: 20px;
    display: inline-block;
    width: 450px;
    height: 350px;
    background: #ccc;    
    position: relative;/* 使img水平垂直居中 */
}
/* 等比缩放，且水平垂直居中 */
.img-01 {
    width: auto; 
    height: auto; 
    max-width:100%; 
    max-height:100%; 
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}
/* 平铺 */
.img-02{
    width: 100%;
    height: 100%;
}
</style>

二、效果

1、等比缩放，且水平垂直居中

2、拉框占满

三、知识点

平铺

img {
    width: auto; 
    height: auto; 
    max-width:100%; 
    max-height:100%;
}

等比缩放的水平垂直 居中

div{
    position: relative;
}
img{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

拉伸占满

img {
    width: 100%; 
    height: 100%; 
}