css - 切断溢出图像而不溢出:隐藏
问题描述
我有一个固定高度的 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 指定的可用空间。
我怎样才能做到这一点?
解决方案
推荐阅读
- vb.net - VB.NET 中的登录表单不允许用户在输入正确的登录详细信息之前错误地输入登录详细信息后登录
- python - 从随机字符串中过滤单词(Python)
- c# - 无法在此范围内声明,因为该名称在封闭的本地范围内使用
- webpack - 在 npm run dev 期间收到 webpack 警告并在 Next.js 中首次加载
- sql - SQL Server:执行计划解释
- sql - SQL - SFW,在哪里使用 IN
- javascript - 单击按钮时,工具提示的文本如何变化?
- arrays - 计算数据集中无效/不正确的数据
- asp.net - 从 RCL 访问服务器上的静态文件
- firebase - 如何从 Firestore 获取文档 ID