- 首页
- 前端开发
- 带有图像子项的 flex 项目无法正确调整其大小
带有图像子项的 flex 项目无法正确调整其大小
[英] flex item with image child doesn't adjust its size properly
本文介绍了带有图像子项的 flex 项目无法正确调整其大小的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我找到了这篇文章，Flex item带有图像的孩子不会从其原始宽度进行调整，我最初认为这是有答案的，但它没有，......当使用设置高度时，部分确实如此.
我想要并期望在这里发生的是图像与文本元素的高度匹配，然后在保持其比例的同时调整其宽度.
这似乎适用于 Chrome，但不适用于 Edge/IE/Firefox.由于我没有 iOS 设备，因此无法测试 Safari，因此如果有人可以分享它如何/是否在那里工作，我将不胜感激.
这不需要是 flexbox 解决方案，尽管我希望使用 CSS 解决方案，这意味着没有脚本.
<小时>
编辑
给定文本的高度可以是动态的，并且基于其内容，所以预定义的 200px 只是给它一个高度，JSFiddle 演示，设置高度 .
<小时>
JSFiddle 演示，基于内容的高度
堆栈片段
.container {显示:inline-flex；}.img img {高度:100%；}.文本 {背景:浅蓝色；}.text-content {宽度:200px；}
<div class="img"><img src="http://placehold.it/160x90">
<div class="text"><div class="text-content">一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>
<小时>预期结果(硬编码)
.container {显示:inline-flex；}.img img {高度:100%；宽度:355px；/* 强制正确的宽度 */}.文本 {背景:浅蓝色；}.text-content {宽度:200px；}
<div class="img"><img src="http://placehold.it/160x90">
<div class="text"><div class="text-content">一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>一些文字内容<br>
解决方案
您应该在 .container 级别定义高度.以下 CSS 适用于您上面提到的所有浏览器:
.container {显示:inline-flex；高度:200px；}.img {高度:100%；}.img img {高度:100%；}.文本 {背景:浅蓝色；}.text-content {宽度:200px；}
更新
我会留下旧答案以防万一，但这似乎有效codepen.我尝试过不同数量的行和文本大小.
.container {显示:inline-flex；}.img img {高度:100%；}.文本 {背景:浅蓝色；}
I found this post, Flex item with image child doesn't adjust from its original width, which I initial thought had the answer, but it didn't, ... well partially it did, when a set height is used.
What I want and expect to happen here, is that the image matches the text element's height and then adjust its width while keeping its ratio.
This appears to work in Chrome, but not in Edge/IE/Firefox. Haven't been able to test Safari as I don't have an iOS device, so I would appreciate if someone can share how/if it work there.
This doesn't need to be a flexbox solution, though I expect a CSS one, meaning no script.
Edit
The given text's height could be dynamic, and based on its content, so the predefined 200px was simply to give it a height, JSFiddle demo, set height .
JSFiddle demo, content based height
Stack snippet
.container {
display: inline-flex;
}
.img img {
height:100%;
}
.text {
background: lightblue;
}
.text-content {
width: 200px;
}
<div class="container">
<div class="img">
<img src="http://placehold.it/160x90">
</div>
<div class="text">
<div class="text-content">
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
</div>
</div>
</div>
Expected result (hard coded)
.container {
display: inline-flex;
}
.img img {
height:100%;
width: 355px; /* force correct width */
}
.text {
background: lightblue;
}
.text-content {
width: 200px;
}
<div class="container">
<div class="img">
<img src="http://placehold.it/160x90">
</div>
<div class="text">
<div class="text-content">
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
Some text content<br>
</div>
</div>
</div>
解决方案
You should define the height at the .container level. Following CSS will work for all the browsers you mentioned above:
.container {
display: inline-flex;
height: 200px;
}
.img {
height: 100%;
}
.img img {
height:100%;
}
.text {
background: lightblue;
}
.text-content {
width: 200px;
}
UPDATE
I'll leave the old answer just in case but this seems to work codepen.
I've tried with varying number of lines and text sizes.
.container {
display: inline-flex;
}
.img img {
height:100%;
}
.text {
background: lightblue;
}
这篇关于带有图像子项的 flex 项目无法正确调整其大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
