需要保持高宽比的图,可以用 padding-top 实现

vue
<template>
<div class="border m-4 img-container">
<img src="/logo.png" alt="" />
</div>
</template>
<style lang="less">
.img-container {
position: relative;
padding-top: 100% * (250/750);
height: 0;
overflow: hidden;
img {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
}
}
</style>less
.img-container {
position: relative;
// 实现宽高比为 100:750 的图片区域
padding-top: 100% * (250/750);
height: 0;
overflow: hidden;
img {
width: 100%;
height: auto;
position: absolute;
left: 0;
top: 0;
}
}