Question

假设我有一个div，它正是浏览器窗口的维度，在div里面我想要放置一个图像和一个包含标题的单独div（只是文本）。我想安排和扩展这些元素以满足某些要求：

容器div应该有一些填充，以便没有任何东西接触视口的边缘。
无论图像的比例如何，无论图片的长度如何，图像和标题都应占据较大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>

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

1 个答案: