图片伸缩项目不会缩小Flexbox的高度

时间：2019-04-11 10:13:30

标签： html css image css3 flexbox

我有一个flex容器，其中包含一个img flex项目。

我希望此img忽略其固有高度（90像素），以便该高度可以缩小以与同级的flex项目高度匹配（按照默认的align-items: stretch样式）。

.container {
    border: 1px solid;
    display: flex;
}

.item {
    border: 1px solid;
}

.content {
    width: 200px;
    height: 50px;
    background-color: hotPink;
}
<div class="container">
    <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
    <div class="item">
        <div class="content"></div>
    </div>
</div>

如果将img换成div，我们可以看到所需的行为：

.container {
    border: 1px solid;
    display: flex;
}

.item {
    border: 1px solid;
}

.dynamicHeightContent {
    width: 120px;
    height: 100%;
    background-color: green;
}

.content {
    width: 200px;
    height: 50px;
    background-color: hotPink;
}
<div class="container">
    <div class="item">
        <div class="dynamicHeightContent"></div>
    </div>
    <div class="item">
        <div class="content"></div>
    </div>
</div>

我在min-height: 0上尝试过img，但无济于事。

  • 适用于img而不适用div的特殊行为是什么？
  • 我们如何选择退出img的特殊行为，使其表现得与其他弹性项目（例如div）类似？如果无法选择退出，是否有建议的解决方法？

请注意，尽管img不会缩小其高度，但确实会增长：

.container {
    border: 1px solid;
    display: flex;
}

.item {
    border: 1px solid;
}

.content {
    width: 200px;
    height: 300px;
    background-color: hotPink;
}
<div class="container">
    <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
    <div class="item">
        <div class="content"></div>
    </div>
</div>

注意：我很高兴忽略img的宽高比。我打算避免通过img使object-fit: cover倾斜。

3 个答案:

答案 0 :(得分：1)

我认为您是在错误地看待这个问题。

图片本身的高度为90px，这意味着flex项的内容的高度为90px（因为您的图片是flex项）。因此，右侧的div与图像高度匹配，因为它高于div的高度，而不是相反。

考虑一下，就好像您将flex项目（图像）的高度设置为90px。因此，除非将其设置为较小的高度，否则它不会收缩传递。即使您没有将图像高度显式设置为90px，也可以自然地将其设置为90px，所以它被隐式设置，从而引起混淆。因此，尽管它的高度会超过90px，但不会超出其高度，因为那是flex项目内容的高度。

如果您将其交换为一个div，它的工作方式就像您想象的那样，是因为在.item div（即弹性项目）上没有设置高度。

答案 1 :(得分：1)

请注意，在您的示例中，item是 flex项，而不是content-您应检查{{ 1}}。

  

我们如何选择退出img的特殊行为，使其行为类似于   其他弹性商品（例如div）？

它的行为类似于其他 flex项-item作为 flex项可能不是很有用，但是拉伸行为效果很好：

  • 如果图像的高度大于<img>，则item 拉伸到图像的高度
  • 如果图像的高度小于item，则图像拉伸到item的高度，打破其宽高比。

请参见下面的演示

content
.container {
  border: 1px solid;
  display: flex;
}

.item {
  background: cadetblue;
}

.content {
  width: 200px;
  background-color: hotPink;
}

img {
  display: block;
}

  

我在<h2>Small content</h2> <div class="container"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"> <div class="item"> <div class="content">some text here some text here some text here </div> </div> </div> <br/> <h2>Large Content</h2> <div class="container"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"> <div class="item"> <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div> </div> </div>上尝试过min-height: 0，但无济于事。

将img沿 flex方向赋予列flexbox ，以覆盖默认的 auto 行为（对于行方向，属性为min-height: 0）-在横轴上不起作用。

您可以在下面查看详细信息和一些示例：

将图像包装在容器中

现在将min-width包裹在div中，然后看到相同的情况- stretch 行为再次很好：

<img>
.container {
  border: 1px solid;
  display: flex;
}

.item {
  background: cadetblue;
}

.content {
  width: 200px;
  background-color: hotPink;
}

img {
  display: block;
}

现在的区别是，您现在可以在图像上成功使用<h2>Small content</h2> <div class="container"> <div class="item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div> <div class="item"> <div class="content">some text here some text here some text here </div> </div> </div> <br/> <h2>Large Content</h2> <div class="container"> <div class="item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div> <div class="item"> <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div> </div> </div>（如果它是 flex项，则无法正常工作）：

object-fit
.container {
  border: 1px solid;
  display: flex;
}

.item {
  background: cadetblue;
}

.content {
  width: 200px;
  background-color: hotPink;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

  

我希望此img忽略其固有高度（90像素），以便   高度可能会缩小，以与兄弟姐妹的伸缩物品高度匹配

忽略图像高度的唯一方法是在图像包装器上使用 positioning ：

  • 相对于其包装器绝对放置图像，
  • 您可以为图像包装器指定宽度，也可以在<h2>Small content</h2> <div class="container"> <div class="item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div> <div class="item"> <div class="content">some text here some text here some text here </div> </div> </div> <br/> <h2>Large Content</h2> <div class="container"> <div class="item"> <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div> <div class="item"> <div class="content">some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here </div> </div> </div>上设置flex: 1以获取水平可用宽度的一半。

请参见下面的演示

item
.container {
  border: 1px solid;
  display: flex;
}

.item {
  background: cadetblue;
  flex: 1; /* equal width for items */
}

.content {
  width: 200px;
  background-color: hotPink;
}

.item:first-child { /* image container */
  position: relative;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute; /* position absolutely */
  top: 0;
  left: 0;
}

答案 2 :(得分：0)

虽然这不是您要问的答案，但是div和img的行为实际上是相同的，也就是说，如果内容比高度高，则高度会增加

示例：

.container {
    border: 1px solid;
    display: flex;
}

.item {
    border: 1px solid;
}

.dynamicHeightContent {
    width: 120px;
    height: 100%;
    background-color: green;
}

.content {
    width: 200px;
    height: 50px;
    background-color: hotPink;
}
<div class="container">
    <div class="item">
        <div class="dynamicHeightContent">
        akhsdjahskd<br>
        ajkhsdkjhasd<br>
        ajshdkahsd<br>
        ajsgdjgad<br>
        ajshdasjdh<br>
        </div>
    </div>
    <div class="item">
        <div class="content"></div>
    </div>
</div>

由于您坚持要object-fit解决此问题，因此可以尝试一下，如您所见，object-fit仅在我们设置了高度和宽度时才有效，否则浏览器将尝试使其成为“保持长宽比”，只需尝试从css中移除高度或宽度（一次将其移除）

.container {
    border: 1px solid;
    display: flex;
}

.item {
    border: 1px solid;
}

img.item {
    height: 50px;
    width: 200px;
    object-fit: cover;
}

.content {
    width: 200px;
    height: 50px;
    background-color: hotPink;
}
<div class="container">
    <img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ">
    <div class="item">
        <div class="content"></div>
    </div>
</div>

相关问题
最新问题