javascript - How do I maintain aspect ratio with browser window resize - Stack Overflow

admin管理员组

文章数量:1390476

I have a page built using HTML/CSS that is meant to be used for the sole purpose of being displayed on a TV. I've developed the page to fit perfectly within a 1920x1080 ratio, but I would like a way to have the page scale up or down with the exact same aspect ratio of the original design. Is there any Javascript script I could use to help maintain the constant ratio?

Edit: This will eventually be turned into a RoR application that will constantly update content such as news/events/etc.

I have a page built using HTML/CSS that is meant to be used for the sole purpose of being displayed on a TV. I've developed the page to fit perfectly within a 1920x1080 ratio, but I would like a way to have the page scale up or down with the exact same aspect ratio of the original design. Is there any Javascript script I could use to help maintain the constant ratio?

Edit: This will eventually be turned into a RoR application that will constantly update content such as news/events/etc.

• javascript
• html
• css

Share Improve this question Follow edited Oct 26, 2012 at 20:11 Spentacular asked Oct 26, 2012 at 19:48 SpentacularSpentacular 24511 gold badge44 silver badges1313 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

a simple listen on window resize would solve the problem:

$(window).on('resize',funciton(){
  var self=$('#ur_id');
  self.height( self.width() * (1080/1920))
})

You can use CSS @media queries for this

@media screen and (min-width: 1920px) {
   /*Styles goes here*/
}

Or you can use media = projection

The design for a device supporting 1920x1080 resolution mostly is not applicable to a mobile device for example. Maybe you need to hide some elements (generally sidebar) or decrease the font-size, load a different logo... So the best solution is a responsive web design using @media queries as @Mr. Alien suggest.

Responsive web design is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop puter monitors to mobile phones).

You can check some Guidelines and Tutorials at SmashingMagazine.

本文标签： javascriptHow do I maintain aspect ratio with browser window resizeStack Overflow