css - 基于背景图片flexbox动态改变高度
问题描述
小提琴:
https://codepen.io/0akd0adk0asdk09asd/pen/QWbaLZa
当浏览器调整大小时,图像大小正确调整,宽度正确改变,但高度根本没有改变。如果我删除高度:375px;盒子塌了。如何使高度像当前宽度一样响应?
<div class="container">
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">c</div>
<div class="bc">g</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
<div class="card">
<div class="t">
<div class="tl"></div>
<div class="tr">Servant</div>
</div>
<div class="mc">2</div>
<div class="bc">3</div>
</div>
</div>
CSS
.container {
width: 80%;
margin: 1rem auto;
background: #f0f0f0;
min-height: 375px;
padding: 0.1rem;
border-radius: 0.1rem;
display: flex;
justify-content: space-between;
flex-wrap: row;
height: 100%;
}
.card {
flex: 1 1 auto;
flex-flow: row nowrap;
background: url("https://i.imgur.com/q8WyDB6.png") no-repeat;
background-size: 100%;
margin: 0.2rem;
display: flex;
flex-direction: column;
flex-shrink: 1;
max-width: 148px;
max-height: 375px;
min-height: 100%;
color: #fff;
text-shadow: 0 0 4px rgba(0, 0, 0, .5), 0 0 1px rgba(0, 0, 0, 1);
font-family: "Segoe UI";
}
.card::after {
content: "";
}
.t {
flex: 0 0 auto;
display: flex;
}
.tl {
min-height: 30px;
background: rgba(255, 0, 0, .1);
flex: 0 0 30%;
}
.tr {
flex: 1 1 100%;
background: rgba(0, 0, 255, .1);
font-weight: 600;
font-size: 1.0rem;
text-align: center;
align-self: center;
}
.mc {
height: 100%;
flex: 1 1 100%;
background: rgba(0, 255, 0, .1);
padding: 0.5rem 0.5rem;
}
.bc {
flex: 0 0 auto;
background: rgba(255, 255, 0, .1);
padding: 1.0rem 0.5rem;
}
解决方案
将 align-items: flex-start 添加到容器中。默认情况下它是拉伸的。
拉伸(默认):拉伸以填充容器(仍然尊重最小宽度/最大宽度) flex-start / start / self-start:项目放置在交叉轴的开始处。
推荐阅读
- java - 更新 RecyclerView 数据会减慢 Activity 的 UI
- php - 将字符串格式的函数转换为计算
- spring-boot - 无法在外部 tomcat 上部署 Spring Boot 应用程序
- github - 范围有限的个人访问令牌可以与其他用户共享吗?
- node.js - 通过 socket.io 连接以响应本机和风帆
- amazon-web-services - 如何在 Terraformer 中使用过滤器来导入 AWS Lambda 函数
- angular - Angular Froala - 将图像上传到 Firebase
- regex - 不匹配 ( 和 ),但匹配 '(' 和 ')' 的正则表达式
- python - 在 python 文件中导入已导入文件
- sequelize.js - Sequelize:检索实体时是否可以包含多个级别的关联