HTML
<div class="list flex flex-wrap px-24">
<template v-for="item in config.list">
<div class="list-items" @click="bindNavigate(item)">
<div class="list-pic relative">
<img class="absolute left-0 top-0 w-full h-full" :src="toThumbnail(item.artwork.image_url_list[0])" />
</div>
</div>
</template>
</div>
CSS
.list-items {
flex: 0 0 calc(50vw - 24px - 12px);
border-radius: 10px;
margin-bottom: 32px;
&:nth-child(2n) {
margin-left: auto;
}
}
.list-pic {
width: 100%;
padding-top: 100%;
img {
border-radius: 8px;
object-fit: cover;
}
}
2. image按比例剪裁
方案一 aspect-ratio
问题:兼容问题
方案二:padding
<div class="image-container relative">
<img class="sale-image" :src="item.image_url_main_page">
</div>
.image-container {
position: relative;
width: 100%;
padding-top: 37.3%; //宽:高 = 100:37.3
border-radius: 10px;
}
.sale-image {
position: absolute;
top: 0;
left: 0;
right: 0; //图片小于区域宽度时,拉伸到区域右端
bottom: 0; //图片小于区域高度时,拉伸到区域底部
object-fit: cover; //原图比例,填满区域
border-radius: 10px;
}