0

So I am currently designing a website and one of things Im noticing is the div I have placed for the container doesnt exactly flow in the way I want it to when observed in different resolutions. Heres what I have in the CSS:

#container{
    position: relative;
    width: 100%;
    height: 100%;
    background-color: black;
}
#center{
    background-image:url(http://farm4.staticflickr.com/3768/11633218256_30a04f01c3_o.png);
    height:1080px;
    width:1920px;
    position:absolute;
    top:50%;
    left:50%;
    margin-left: -960px;
    margin-top: -540px;
    overflow: hidden
}

And here is my HTML:

<div id="container">
    <div id="center"></div>
</div>

I pretty much just want the center div to resize on initial load based on the level of zoom the browser is currently at and fit the edges of the div to that zoom while keeping the div's width and height proportions of 16:9. I would like to be able to apply the same scaling to everything that is nested within the div as well if this is possible. But I would like the user to be able to zoom in and out afterwards without the div resizing to fit the screen actively while he is zooming. Im mostly wanting this process without auto zooming the browser because I do not want to mess with the level of zoom the user has on other websites.

JSArrakis
  • 777
  • 1
  • 9
  • 22

1 Answers1

0

The paragraph explaining your goal is quite confusing. Can you explain what you're trying to do better?

#center{ 
  transform:scale(1.5); 
  transform-origin: center center;

  -webkit-transform:scale(1.5); 
  -webkit-transform-origin: center center;
}

This would scale your div, and all it's children, without changing it's aspect ratio.

Or maybe you could use an actual tag inside #center instead of a background-image. Then you could do this:

#center img{
  width: 100%;
  height: auto;
}

And this link is an indepth SO post on detecting cross-browser page zoom.

Community
  • 1
  • 1
sweeds
  • 539
  • 6
  • 18