图像弹性项目不会在弹性盒中缩小高度 [英] Image flex item does not shrink height in a flexbox

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

问题描述

我有一个包含 img 弹性项目的弹性容器.

我希望这个 img 忽略它的内在高度 (90px) 以便高度可以缩小以匹配同级的 flex item 高度(根据默认的 align-items:stretch样式).

.container {边框:1px 实心；显示:弹性；}.物品 {边框:1px 实心；}.内容 {宽度:200px；高度:50px；背景颜色:hotPink；}

<img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"><div class="item"><div class="content"></div>

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

.container {边框:1px 实心；显示:弹性；}.物品 {边框:1px 实心；}.dynamicHeightContent {宽度:120px；高度:100%；背景颜色:绿色；}.内容 {宽度:200px；高度:50px；背景颜色:hotPink；}

<div class="item"><div class="dynamicHeightContent"></div>
<div class="item"><div class="content"></div>

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

  • 适用于 img 而不适用于 div 的特殊行为是什么?
  • 我们如何选择退出 img 的特殊行为，使其表现得像其他 flex 项目(例如 div)?如果无法选择退出，是否有推荐的解决方法?

请注意，虽然 img 不会缩小其高度，但它看起来确实增长:

.container {边框:1px 实心；显示:弹性；}.物品 {边框:1px 实心；}.内容 {宽度:200px；高度:300px；背景颜色:hotPink；}

<img class="item" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOFf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"><div class="item"><div class="content"></div>

注意:我很高兴忽略 img 的纵横比.我计划通过 object-fit:cover 避免倾斜 img.

解决方案

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

<小时><块引用>

我们如何选择退出 img 的特殊行为，使其表现得像其他弹性项目(例如 div)?

它的行为与其他 flex item - 作为 flex item 可能不是很有用，但拉伸行为工作正常:

  • 如果图像的高度大于item，则item 拉伸到图像的高度
  • 如果图像的高度小于 item，图像会拉伸到 content 的高度，破坏其纵横比.

见下面的演示:

.container {边框:1px 实心；显示:弹性；}.物品 {背景:学员蓝；}.内容 {宽度:200px；背景颜色:hotPink；}图片{显示:块；}

小内容
<div class="容器"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"><div class="item"><div class="content">这里有一些文字 这里有一些文字 这里有一些文字 </div>

<br/><h2>大内容</h2><div class="容器"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"><div class="item"><div class="content">这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字这里有一些文字 这里有一些文字 这里有一些文字 </div>

<块引用>

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

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

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

<小时>

将图像包装在容器中

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

.container {边框:1px 实心；显示:弹性；}.物品 {背景:学员蓝；}.内容 {宽度:200px；背景颜色:hotPink；}图片{显示:块；}

小内容
<div class="容器"><div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div><div class="item"><div class="content">这里有一些文字 这里有一些文字 这里有一些文字 </div>

<br/><h2>大内容</h2><div class="容器"><div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div><div class="item"><div class="content">这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字这里有一些文字 这里有一些文字 这里有一些文字 </div>

现在的区别是你现在可以在图像上成功使用object-fit(如果它是一个flex item，这不能正常工作):

.container {边框:1px 实心；显示:弹性；}.物品 {背景:学员蓝；}.内容 {宽度:200px；背景颜色:hotPink；}图片{显示:块；宽度:100%；高度:100%；适合对象:覆盖；}

小内容
<div class="容器"><div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div><div class="item"><div class="content">这里有一些文字 这里有一些文字 这里有一些文字 </div>

<br/><h2>大内容</h2><div class="容器"><div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div><div class="item"><div class="content">这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字这里有一些文字 这里有一些文字 这里有一些文字 </div>

<小时><块引用>

我希望这个 img 忽略它的内在高度 (90px) 以便高度可能会缩小以匹配同级的弹性项目高度

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

见下面的演示:

.container {边框:1px 实心；显示:弹性；}.物品 {背景:学员蓝；弹性:1；/* 等宽的项目 */}.内容 {宽度:200px；背景颜色:hotPink；}.item:first-child {/* 图像容器 */位置:相对；}图片{显示:块；宽度:100%；高度:100%；适合对象:覆盖；位置:绝对；/* 绝对位置 */顶部:0；左:0；}

小内容
<div class="容器"><div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div><div class="item"><div class="content">这里有一些文字 这里有一些文字 这里有一些文字 </div>

<br/><h2>大内容</h2><div class="容器"><div class="item"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRu-3yBSd2b6JCOMcGVSOf8X49QB3Ik-OI87gKEMwWLrdJxP5qOErmZQ"></div><div class="item"><div class="content">这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字 这里有一些文字这里有一些文字 这里有一些文字 这里有一些文字 </div>

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

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>

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>

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

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>

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

解决方案

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

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

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

See demo below:

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

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

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:

Wrapping image in a container

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>

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>

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

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

See demo below:

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

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

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