时间戳

首页 > 解决方案 > 具有小数百分比高度的 CSS 元素仍然占用 flex 容器中的空间

css - 具有小数百分比高度的 CSS 元素仍然占用 flex 容器中的空间

问题描述

我有一个要保持纵横比的图像元素。我需要它具有响应宽度。换句话说，图像需要具有 100% 的宽度，但始终具有相对于其响应宽度的高度。即宽度总是需要是父容器（使用 flex）的 100%，高度总是需要是宽度的56% 。这是我尝试过的：

#container {
  display: 'flex',
  alignContent: 'center',
  alignItems: 'center',
  flexDirection: 'column',
  justifyContent: 'center',
  justifyItems: 'center',
  padding: theme.spacing(0, 0, 2),
}

#myImg {
  width: 100%;
  height: 56%;
}

<div class='container'>
  <img class='myImg' src='whatever.jpg'>
  <div ... other stuff />
</div>

问题在于，这确实保持了所需的纵横比，但如果未将其设置为 56%，则根据图像的完整高度在图像上方和“其他东西”下方添加一个间隙。我如何在没有差距的情况下实现这一目标？

标签： css

解决方案

这是一种方法：

使用outer wrapper-div图像。授予纵横比padding-top。将图像放置在包装器中position: absolute，将其居中并隐藏大于纵横比的部分，如果图像本身不匹配纵横比。

请参阅示例/演示：

#container {
  display: 'flex',
  alignContent: 'center',
  alignItems: 'center',
  flexDirection: 'column',
  justifyContent: 'center',
  justifyItems: 'center',
  padding: theme.spacing(0, 0, 2),
}



.img-wrapper {
    width: 100%;
    padding-top: 56%;   
    position: relative;
    overflow: hidden;
    border: 1px solid red;
}

.img-wrapper img {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 100%;
    height: auto;
}
<div class='container'>

    <div class="img-wrapper">
        <img class='myImg' src='https://dummyimage.com/600x400/0000ff/fff&text=-image-'>
    </div>

</div>

推荐阅读