CSS Zoom to Fit height and width (Stretch)

前端 未结 2 2045
旧巷少年郎
旧巷少年郎 2021-02-08 04:15

My content is in a container of 800x480 pixels. When the window resizes, my goal is to:

  • Zoom/Stretch the container to fill the entire screen
  • Including all
2条回答
  •  无人及你
    2021-02-08 04:29

    Viewport width-height might be what you need here

    div#content{
        width: 100vw; // The width of this element is 100% of the viewports width
        height: 100vh; // The height of this element is 100% of the viewport height
    
        font-size: 1vmax; // You can fiddle with this to mame sure the font gets
                          // the size you want
    }
    

    If you want elements to maintain their relative positions, you can use the same rule for top and left css properties

    While this is not supported by all browsers, polyfills are available here to make it work back to IE8

提交回复
热议问题