css - Flexbox 图像高度调整大小
问题描述
我无法让我的图像完全调整大小。
理想情况下,我希望图像调整大小以使选项适合屏幕,目前它只适合宽度,为什么会这样?是否可以通过仅使用 css 来获得我希望的行为,也许需要媒体查询?谷歌试图找到类似的问题,但没有运气!
提前致谢!
更新:
为了澄清,我的问题是图像没有调整大小,如果窗口的高度变得足够小 - 标题消失并且我得到一个滚动条。我希望所有内容都按比例缩小,因此不需要滚动条。
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
background-color: aqua;
}
.content {
display: flex;
overflow-x: auto;
flex: 2 1 auto;
flex-wrap: nowrap;
}
.content::-webkit-scrollbar {
display: none;
}
.option {
display: flex;
flex-direction: column;
margin: auto 1em;
width: 90%;
height: 70%;
text-align: justify;
border: 3px solid black;
}
.img {
flex: 1;
}
.title {
flex: 0;
font-weight: bold;
text-align: center;
flex: 1;
margin: auto;
}
.desc {
flex: 0;
}
.header {
flex: 2;
text-align: center;
background-color: red;
}
.footer {
flex: 1;
background-color: brown;
}
<div class="container">
<div class="header">
Fusce pellentesque ante.
</div>
<div class="content">
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Proin hendrerit.</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla non lacus tincidunt suscipit. Nam nec arcu a erat convallis.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Nullam at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut congue eros. Aenean sit amet quam efficitur, lacinia ligula ac.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Sed nec.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi mauris, ac interdum tellus pulvinar id. Morbi non molestie</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Morbi in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non rutrum arcu, ac posuere odio. Nunc in dolor eget nisi.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Mauris ac.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar orci non consectetur accumsan. Aenean posuere, felis commodo congue pulvinar.</p>
</div>
</div>
<div class="footer">
<p>Quisque venenatis volutpat dictum. Praesent.</p>
</div>
</div>
解决方案
希望这是你想要的。如果这是正确答案!这就是我所做的。
- 将容器类的高度和宽度设置为 100%,并将显示设置为
flex
,flex-direction: column
因此页眉、页脚和内容类垂直对齐。 - 现在,如果您将内容类
flex
属性设置为1
它将占用其余的宽度和高度。 - 给选项类一个属性
display: flex
并设置为flex-direction: column
使图像、标题和描述垂直对齐。 - 通过将
min-height
30px 分配给标题和选项中的 p,可以将其余空间分配给图像,我希望这是您想要的。
* {
margin: 0;
padding: 0;
}
.content {
min-height: 100%;
width: 100%;
min-width: 100%;
display: flex;
flex-direction: row;
box-sizing: border-box;
padding: 30px 0;
}
.content .option {
flex: 1;
max-height: 100vh;
min-width: 100%;
display: flex;
flex-direction: column;
}
.content .option img {
height: calc(100% - 160px);
width: 100%;
}
.content .option p {
height: 20px;
}
.content .option p:nth-child(2) {
height: 40px;
}
.header,
.footer {
position: fixed;
left: 0;
right: 0;
background-color: #ccc;
height: 30px;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
<div class="container">
<div class="header">
Fusce pellentesque ante.
</div>
<div class="content">
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Proin hendrerit.</p>
<p class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur fringilla non lacus tincidunt suscipit. Nam nec arcu a erat convallis.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Nullam at.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ut congue eros. Aenean sit amet quam efficitur, lacinia ligula ac.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Sed nec.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porttitor nisi mauris, ac interdum tellus pulvinar id. Morbi non molestie</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Morbi in.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam non rutrum arcu, ac posuere odio. Nunc in dolor eget nisi.</p>
</div>
<div class="option">
<img class="img" src="https://www.w3schools.com/w3css/img_lights.jpg">
<p class="title">Mauris ac.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque pulvinar orci non consectetur accumsan. Aenean posuere, felis commodo congue pulvinar.</p>
</div>
</div>
<div class="footer">
<p>Quisque venenatis volutpat dictum. Praesent.</p>
</div>
</div>
推荐阅读
- logging - 我如何阻止所有 ssh 连接,除了来自 firewalld 中特定来源的连接,还记录被拒绝的 ssh 连接
- r - 由于临时目录,在 R 中绘制渲染错误
- reactjs - 无法到达用户数据字段,控制台说找不到未定义的用户
- java - 从没有网络服务器的远程机器读取文件
- ajax - ajax 调用后发布 http://localhost/DemoWebsite/wp-admin/custom_Settings.php 404 (Not Found)
- ios - iOS CoreBluetooth 指示特征读回执
- unity3d - 如何将我的动画与 Unity3d 中的变换相匹配?
- c# - “ServiceController”不包含“GetServices”的定义
- python - Python Google Drive API 下载私人文件 Google 登录屏幕
- google-sheets - 如何将数据从一个电子表格导入另一个 Google 表格?