一、代码
<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%;
}