使用 flexbox 调整图像和标题的大小答案

【问题标题】：Resize image and caption with flexbox使用 flexbox 调整图像和标题的大小
【发布时间】：2014-03-13 00:04:55
【问题描述】：

假设我有一个div，这正是浏览器窗口的尺寸，在div 里面我想放一张图片和一个单独的div，其中包含一个标题（只是文本）。我想排列和缩放这些元素以满足某些要求：

容器 div 应该有一些填充，以便没有任何东西接触到视口的边缘。
无论图片的比例如何，无论标题的长度如何，图片和标题都应在较大的 div 中占据尽可能多的空间。
标题应仅与图像一样宽，以使其看起来正好适合下方。（极窄的图像在这里会出现问题，因此标题可能有一个最小宽度。）

就是这样！听起来 flexbox 是为了解决这种问题，但我没有任何运气。

【问题讨论】：

【解决方案1】：

使用 JavaScript 将元素与屏幕高度/宽度成比例：

<div id='container' style='padding:10px;'>
<img id='image' src=''>
</img>
<div id='caption' style='font-size:45px;'>
Caption Text
</div>
</div>
<script>
var imgwidth = (980/1000) * screen.width
var img = document.getElementById('image').style
img.position = "Absolute"
img.width = imgwidth
img.height = (700/1000) * screen.height
var cpn = document.getElementById('caption').style
cpn.position = "relative"
cpn.top = (700/1000) * screen.height + 30
cpn.width = imgwidth
</script>

【讨论】：

为了改进您的答案，您可能需要添加一些关于您的答案如何工作并解决 OP 问题的评论。
Javascript 绝对是一种方法。对 flexbox 感到好奇，因为（除了浏览器支持之外）它可能是一个更优雅的解决方案。