html - 使用 flexbox 调整图像和标题的大小

Question

假设我有一个 div，它正好是浏览器窗口的尺寸，在那个 div 里面我想放一个图像和一个单独的 div 包含标题(只是文本)。我想安排和缩放这些元素以满足特定要求:

• 容器 div 应该有一些填充，这样就不会触及视口(viewport)的边缘。
• 无论图片的比例如何，也无论标题的长度如何，图片和标题一起应在较大的 div 中占据尽可能多的空间。
• 说明文字的宽度应与图片一样宽，以使其看起来恰好位于图片下方。 (极窄的图像在这里会出现问题，因此标题可能有最小宽度。)

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

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