我有一个具有固定高度的div,并且在其中有一个图像。该图像大于包含div的宽度和高度。我想使图像的宽度与div的宽度匹配,然后使图像的高度自动生成。
HTML:
<template>
<div class="portfolio">
<div class="header">
Portfolio
</div>
<div class="projects">
<div class="project">
<img src="../assets/projects/charlotte_folke.jpg" />
</div>
</div>
<div class="overview">
</div>
</div>
</template>
SCSS:
.portfolio {
width: 100%;
height: 100%;
}
.header {
height: 10%;
display: flex;
font-size: 24px;
color: #B59762;
align-items: center;
justify-content: center;
}
.projects {
height: 80%;
display: flex;
overflow: auto;
flex-direction: column;
}
.project {
width: 100%;
height: 35%;
overflow: hidden;
img {
width: 100%;
height: auto;
}
}
此解决方案的问题在于,图像元素仍然占据了包含div以下的空间。我想完全剪切图像,所以它只占用包含div所指定的可用空间。
我该如何实现?