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

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

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

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

【问题讨论】:

    标签: html css image 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 感到好奇,因为(除了浏览器支持之外)它可能是一个更优雅的解决方案。
    猜你喜欢
    • 2018-04-30
    • 2016-05-28
    • 1970-01-01
    • 2018-01-07
    • 1970-01-01
    • 1970-01-01
    • 2021-10-02
    • 2012-10-17
    • 2016-08-06
    相关资源
    最近更新 更多