英文:
Horizontal scroll flexbox: Child image exceeds height of parent instead of filling up height
问题
我正在尝试使用flexbox创建一个水平滚动的图像库，但我无法使图像的高度增长以填满容器的高度，同时保持固定的纵横比。
卡片的数量可以是可变的，因此应该有一些灵活的代码，以填充空间，如果有足够的图块，可以进行水平滚动。
以下是问题的简化版本（查看完整页面以获得更好的结果）：
body, ul{
margin:0; padding:0;
}
ul.hor-bar{
background:pink;
border:1rem solid crimson;
padding:2rem;
box-sizing:border-box;
display: flex;
gap: 2rem;
height:100vh;
max-height: 100%;
overflow-x: scroll;
}
li.card{
height: 100%;
max-height: 100%;
display:flex;
flex-direction: column;
}
p{
flex:auto;
/*额外样式*/
background: magenta;
padding: 0.75rem 0;
font-weight:bold;
margin: 0;
}
.img-container{
height:100%;
flex:1 ;
width:auto;
max-height: 100%; /* <=required */
}
img{
height:100%;
width:auto; /* <=required => or 100% with flex-shrink: 0 */
object-fit:cover;
}
<ul class="hor-bar">
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
<!-- 添加更多卡片 -->
</ul>
我知道在上面的示例中，去除100vh的高度可以解决问题。但我正在寻找一个使用动态高度的解决方案。以下是另一个示例，它不使用100vh：
body,ul{
margin:0; padding:0;
}
.fixed{
position: fixed;
padding-top:4rem;
box-sizing:border-box;
height: 100%;
width:100%;
background: green;
}
ul.hor-bar{
background:pink;
border:1rem solid crimson;
padding:2rem;
box-sizing:border-box;
display: flex;
gap: 2rem;
height:100%;
overflow-x: scroll;
}
li.card{
height: 100%;
max-height: 100%;
display:flex;
flex-direction: column;
}
p{
flex:auto;
/*额外样式*/
background: magenta;
padding: 4vh 0;
font-weight:bold;
margin: 0;
}
.img-container{
height:100%;
flex:1 ;
width:auto;
max-height: 100%; /* <=required */
}
img{
height:100%;
width:auto; /* <=required => or 100% with flex-shrink: 0 */
object-fit:cover;
}
<div class="fixed">
<ul class="hor-bar">
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
<!-- 添加更多卡片 -->
</ul>
</div>
英文:
I am trying to make a horizontal scrollable image gallery with flexbox, but I am unable to make the image height grow to fill up the container height while also keeping a fixed aspect ratio.
The amount of cards can be variable, so it should be some flexible code that fills up the space and has a horizontal scroll if there are enough tiles.
Here is a simplified version of the issue (check out the full page for better result):
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
body,ul{
margin:0; padding:0;
}
ul.hor-bar{
background:pink;
border:1rem solid crimson;
padding:2rem;
box-sizing:border-box;
display: flex;
gap: 2rem;
height:100vh;
max-height: 100%;
overflow-x: scroll;
}
li.card{
height: 100%;
max-height: 100%;
//flex-shrink: 0;
display:flex;
flex-direction: column;
}
p{
flex:auto;
/*extra style*/
background: magenta;
padding: 0.75rem 0;
font-weight:bold;
margin: 0;
}
.img-container{
height:100%;
flex:1 ;
width:auto;
max-height: 100%; /* <=required */
}
img{
height:100%;
width:auto; /* <=required => or 100% with flex-shrink: 0 */
object-fit:cover;
}
<!-- language: lang-html -->
<ul class="hor-bar">
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
</ul>
<!-- end snippet -->
I know in this previous example removing the height of 100vh fixes the issue. But I am searching for a solution that uses a dynamic height. Here is another example which does not use the 100vh.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
body,ul{
margin:0; padding:0;
}
.fixed{
position: fixed;
padding-top:4rem;
box-sizing:border-box;
height: 100%;
width:100%;
background: green;
}
ul.hor-bar{
background:pink;
border:1rem solid crimson;
padding:2rem;
box-sizing:border-box;
display: flex;
gap: 2rem;
height:100%;
overflow-x: scroll;
}
li.card{
height: 100%;
max-height: 100%;
//flex-shrink: 0;
display:flex;
flex-direction: column;
}
p{
flex:auto;
/*extra style*/
background: magenta;
padding: 4vh 0;
font-weight:bold;
margin: 0;
}
.img-container{
height:100%;
flex:1 ;
width:auto;
max-height: 100%; /* <=required */
}
img{
height:100%;
width:auto; /* <=required => or 100% with flex-shrink: 0 */
object-fit:cover;
}
<!-- language: lang-html -->
<div class="fixed">
<ul class="hor-bar">
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://i.imgur.com/bCBt6ga.jpeg" alt="pepe">
</div>
<p>Card text</p>
</li>
</ul>
</div>
<!-- end snippet -->
答案1
得分: 1
有些东西需要定义滚动区域的高度。每个子元素的高度都需要被定义为除了自动之外的某个值。然后，你可以将 <img> 的高度设置为其容器的 100%。如果你不另行指定元素的宽度，它将是自动的，因此保留其自然的宽高比。
以下是带有不同大小和宽高比的图像的演示。
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.hor-bar {
background: pink;
border: 1rem solid crimson;
margin: 0;
padding: 0;
display: flex;
gap: 2rem;
height: 100vh;
overflow-x: scroll;
overflow-y: hidden;
list-style-type: none;
}
.card {
height: 100%;
display: grid;
grid-template-rows: 85% 15%;
}
.img-container {
height: 100%;
}
img {
height: 100%;
}
p {
background: magenta;
font-weight: bold;
margin: 0;
padding: .5rem;
}
<ul class="hor-bar">
<li class="card">
<div class="img-container">
<img src="https://picsum.photos/id/237/600/900" alt="dog">
</div>
<p>Card text</p>
</li>
<!-- ... (其他卡片的代码) ... -->
</ul>
英文:
Something needs to define the height of the scroll area. Every child needs to have its height be defined as something other than auto. Then you can set the <img> height to 100% of its container. If you don't otherwise specify the width of the element, it will be auto, and therefore retain its natural aspect ratio.
Demo below with images of different sizes and aspect ratios.
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-css -->
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.hor-bar {
background: pink;
border: 1rem solid crimson;
margin: 0;
padding: 0;
display: flex;
gap: 2rem;
height: 100vh;
overflow-x: scroll;
overflow-y: hidden;
list-style-type: none;
}
.card {
height: 100%;
display: grid;
grid-template-rows: 85% 15%;
}
.img-container {
height: 100%;
}
img {
height: 100%;
}
p {
background: magenta;
font-weight:bold;
margin: 0;
padding: .5rem;
}
<!-- language: lang-html -->
<ul class="hor-bar">
<li class="card">
<div class="img-container">
<img src="https://picsum.photos/id/237/600/900" alt="dog">
</div>
<p>Card text</p>
</li>
<li class="card">
<div class="img-container">
<img src="https://picsum.photos/id/0/600" alt="laptop">
</div>
<p>Card text</p>
</li>
<li class="card">
<div class="img-container">
<img src="https://picsum.photos/id/63/700/600" alt="coffee">
</div>
<p>Card text</p>
</li>
<li class="card">
<div class="img-container">
<img src="https://picsum.photos/id/70/900" alt="trees">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://picsum.photos/id/112/800/500" alt="wheat">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://picsum.photos/id/168/200/300" alt="rocks">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://picsum.photos/id/210/800/300" alt="bricks">
</div>
<p>Card text</p>
</li>
</li>
<li class="card">
<div class="img-container">
<img src="https://picsum.photos/id/216/500/800" alt="path">
</div>
<p>Card text</p>
</li>
</ul>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论