jquery - CSS Zoom to Fit korkeus ja leveys (venytys)

original title: "jquery - CSS Zoom to Fit height and width (Stretch)"


Translate

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 children of the container and maintain their relative positions
  • I don't care about maintaining the aspect ratio

So when the window width/height is 1600x960, I do the following:

zoom: 2

And this stretches the canvas, but if the new aspect ratio isn't the same as 800x480, then it won't fully stretch to either the height or the width.

Isn't something like this available, where I can set an individual stretch for the width and height?

zoom: (2, 2.5)


Sisältöni on 800x480 pikselin säiliössä. Kun ikkuna muuttuu, tavoitteenani on: Zoomata / venytä astiaa koko näytön täyttämiseksi mukaan lukien kaikki lasten lapset ...

Tämä on yhteenveto käännöksen jälkeen. Jos haluat tarkastella koko käännöstä, napsauta käännä-kuvaketta


Kaikki vastaukset
  • Translate

    You can't zoom independently width and height but you can simulate the zoom effect with the CSS scale property that you can apply independently to X and Y axis :

    transform: scaleX(2) scaleY(1.5);
    

    DEMO

    Don't forget to specify a transform origin to 0 0 so that the top/left of your element isn't cropped by the viewport.


  • Translate

    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