html:
<div class="imgs_top">
<img :src="img" class="imgs" />
</div>
css:
.imgs_top {
width: 800px
;
height: 500px
;
display: flex
;
justify-content: center
;
align-content: center
;
.imgs {
width: auto
;
height: auto
;
max-width: 100%
;
max-height: 100%
;
}
}
效果图:
正常大小图片下的展示效果: 又长又窄图片下的展示效果:
