Css 如何收缩img以适应其flex容器？

在这种情况下，我如何缩小img/img容器的大小，使其仅与最宽的同级div一样宽

.outer{
显示：内联flex；
柔性流动：柱；
}
.外跨{
显示器：flex；
}
div{
边框：1px点黑色；
}

文本
更多文本
这应该决定宽度

您可以使用CSS表格布局进行此操作，并在表格上设置

宽度：1%

，在文本元素上设置

空白：nowrap

.outer{
显示：表格；
宽度：1%；
}
.外跨{
空白：nowrap；
}
div{
边框：1px点黑色；
}
img{
最大宽度：100%；
}

文本更多文本
这应该决定宽度

您可以使用CSS表格布局进行此操作，并在表格上设置

宽度：1%

，在文本元素上设置

空白：nowrap

.outer{
显示：表格；
宽度：1%；
}
.外跨{
空白：nowrap；
}
div{
边框：1px点黑色；
}
img{
最大宽度：100%；
}

文本更多文本
这应该决定宽度

你的CSS容器已经和它最宽的同级div一样宽了。你只需要用paint或photoshop缩小图片的边框。

你的CSS容器已经和它最宽的同级div一样宽了。你只需要用paint或photoshop缩小图片的边框。

正如你为flexbox布局所问的那样特别是，这里是使用伪和位置的把戏。注意，只有在您已经知道图像纵横比的情况下，它才起作用，下面是一个正方形图像的示例

div{
边框：1px点黑色；
}
.外部{
显示：内联flex；
柔性流动：柱；
}
.形象{
位置：相对位置；
}
.图片：之前{
内容：“；
显示：块；
填充顶部：100%；
/*https://stackoverflow.com/a/10441480/483779*/
}
.图像img{
位置：绝对位置；
左：0；
排名：0；
最大宽度：100%；
}

这应该决定宽度

当您特别询问flexbox布局时，这里是对伪和位置的把戏。注意，只有在您已经知道图像纵横比的情况下，它才起作用，下面是一个正方形图像的示例

div{
边框：1px点黑色；
}
.外部{
显示：内联flex；
柔性流动：柱；
}
.形象{
位置：相对位置；
}
.图片：之前{
内容：“；
显示：块；
填充顶部：100%；
/*https://stackoverflow.com/a/10441480/483779*/
}
.图像img{
位置：绝对位置；
左：0；
排名：0；
最大宽度：100%；
}

这应该决定宽度

我不确定这个解决方案的跨浏览器兼容性如何，但它可以在Chrome64、Safari11和Firefox57上运行

给出包含

img

a

width:0的元素；最小宽度：100%；最大宽度：100%，以及
img
本身的
宽度：100%

像这样：


div{
边框：1px点黑色；
}
.外部{
显示：内联flex；
柔性流：柱包裹；
}
.孩子{
宽度：0；
最小宽度：100%；
最大宽度：100%；
}
.img{
宽度：100%；
}

文本
更多文本
这应该决定宽度
我不确定这个解决方案的跨浏览器兼容性如何，但它可以在Chrome64、Safari11和Firefox57上运行

给出包含
img
a
width:0的元素；最小宽度：100%；最大宽度：100%，以及
img
本身的
宽度：100%

像这样：


div{
边框：1px点黑色；
}
.外部{
显示：内联flex；
柔性流：柱包裹；
}
.孩子{
宽度：0；
最小宽度：100%；
最大宽度：100%；
}
.img{
宽度：100%；
}

文本
更多文本
这应该决定宽度
使用
宽度：100%；最大宽度：100%将缩放它以适合其容器，在本例中为div，它将自动扩展以匹配其同级的宽度。相关但非dupe-@WildBeard您尝试过吗？使用
width:100%我无法使其工作；最大宽度：100%将缩放它以适合其容器，在本例中为div，它将自动扩展以匹配其同级的宽度。相关但非dupe-@WildBeard您尝试过吗？我不能让它工作这很好，除了一个细节：/与JSFIDLE和我的实际应用程序需求的唯一区别是，最后一个div宽度是由图像决定的，而不是跨度。span文本需要在第一个分区中换行。这很好，除了一个细节：/JSFiddle和我的实际应用程序需要的唯一区别是最后一个div的宽度是由图像决定的，而不是span。跨距文本需要在第一部分换行。很好。知道第一个解决方案为什么有效吗？很好。你知道为什么第一个解决方案有效吗？