/    Sign up×
Community /Pin to ProfileBookmark

100% width, keep height in proportion?

Copy linkTweet thisAlerts:
Jun 24.2009

I’ve got a div that contains a videoplayer. I want that div to have style=”width: 100%”, and I want the height to be in proportion to that.

So, to clarify. The video is 400 x 200 px. But I want to stretch the width to 100% of the size of the surrounding div, and the height shall not be 100%, but in proportion to the width.

Anyone got an idea on how to solve this? Is JavaScript the solution, or can this be done by CSS?

Thanks, Henrik

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@cridleyJun 24.2009 — A very basic solution (assuming that the height is always half the width (400x200))
[code=html]
dv = document.getElementById("MyDiv")
dv.style.height = dv.offsetWidth / 2 +"px"[/code]

where "MyDiv" is the id of the div you want to resize.

The problem with this is that resizing the window, the height will stay the same when the width changes.

To Solve that, put the above code in a function :

[code=html]function Resize()
{
dv = document.getElementById("MyDiv")
dv.style.height = dv.offsetWidth / 2 +"px"
}
[/code]
and put the following in the body tag of your page :

[code=html]<body onresize="Resize()" onload="Resize()">[/code]

Which tells the document to call Resize() every time the window is re-sized.

This works in both IE and FF, haven't tried in other browsers.
×

Success!

Help @orlio spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...