图像伸缩项目不会缩小Flexbox的高度 [英] Image flex item does not shrink height in a flexbox

查看：46
本文介绍了图像伸缩项目不会缩小Flexbox的高度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I have a flex container which contains an img flex item.

我希望此img忽略其固有高度(90px)，以便该高度可以缩小以匹配同级的flex项目高度(根据默认的align-items: stretch样式).

I want this img to disregard its intrinsic height (90px) so that the height may shrink to match the sibling's flex item height (as per the default align-items: stretch style).

.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，则可以看到所需的行为:

We can see the desired behaviour if we swap the img for a 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>

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

I have tried min-height: 0 on the img, to no avail.

  • 什么是适用于img而不是div的特殊行为?
  • 我们如何选择退出img的特殊行为，使其表现得与其他弹性项目(例如div)类似?如果无法选择退出，是否有建议的解决方法?
  • What is the special behaviour that applies to img but not div?
  • How can we opt out of img's special behaviour so that it behaves like other flex items (such as div)? If there isn't a way to opt-out, is there a recommended workaround?

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

Note that whilst the img won't shrink its height, it does appear to grow:

.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的宽高比.我打算避免通过object-fit: cover倾斜img.

Note: I'm happy to disregard the img's aspect ratio. I plan to avoid skewing the img via object-fit: cover.

推荐答案

请注意，在您的示例中，item是 flex项，而不是content-您应检查item的> strech 行为.

Note that in your example, the item is the flex item and not content - you should check the strech behaviour of item here.

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

How can we opt out of img's special behaviour so that it behaves like other flex items (such as div)?

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

It behaves like other flex items - <img> may not be very useful as a flex item but the stretch behaviour works fine:

  • 如果图像的高度大于item，则item 拉伸到图像的高度
  • 如果图像的高度小于item，则图像拉伸到content的高度，打破其宽高比.
  • if the image has more height than item, the item stretches to the height of the image
  • if the image has less height than item, the image stretches to the height of the content breaking its aspect ratio.

请参见下面的演示

.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>

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

I have tried min-height: 0 on the img, to no avail.

将min-height: 0沿 flex方向赋予列flexbox ，以覆盖默认的 auto 行为(对于 row方向(属性为min-width)-在横轴中不起作用.

The min-height: 0 is given to a column flexbox along the flex direction to override the default auto behaviour (for row direction the property is min-width) - this doesn't work in the cross axis.

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

You can see details and some examples of this below:

  • Flexbox会影响溢出包装行为

    Flexbox调整大小和可滚动溢出

    现在将<img>包裹在div中，然后看到相同的情况- stretch 行为再次良好:

    Now wrap the <img> in a div and see the same situation - the stretch behaviour is again good:

    .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>

    现在的区别是，您现在可以在图像上成功使用object-fit(如果它是 flex项，则无法正常工作):

    The difference now is that you can use object-fit successfully on the image now (this does not work properlly if it is a flex item):

    .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;
}

    <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>

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

    I want this img to disregard its intrinsic height (90px) so that the height may shrink to match the sibling's flex item height

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

    The only way to disregard the image height is to use positioning on the image wrapper:

    • 相对于其包装器绝对放置图像，
    • 您可以为图像包装器指定宽度，也可以在item上指定flex: 1以获取水平可用宽度的一半.
    • position the image absolutely with respect to its wrapper,
    • you can either give a width to the image wrapper or give flex: 1 on item to get half of the available width horizontally.

    请参见下面的演示

    .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;
}

    <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>

    这篇关于图像伸缩项目不会缩小Flexbox的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆