CODEWITHSUNDEEP
css
theazureshadow
theazureshadow

Reputation: 10059

How can I make a box have a particular aspect ratio using only html and css?

Can anyone think of a way to get a box to have a particular aspect ratio using only html and css? My guess is to put an image with the aspect ratio you want in the box, then absolute positioning the rest of the content on top of the image. Perhaps something magical with negative margins?

Good answers will be cross browser (gracefully degrading for IE7, older versions). Bonus points if you can overflow the box gracefully (which my basic idea doesn't account for).

Upvotes: 2

Views: 141

Answers (2)

Per Quested Aronsson
Per Quested Aronsson

Reputation: 12140

I asked a similar question recently, in a different forum, which resulted in this post: http://philarcher.org/diary/2012/scalablesquares/. The suggested solution is to use SVG (Scalable Vector Graphics) for the layout part where aspect ratio should be maintained. There is an example with source code and explanations in this post.

Upvotes: 0

one.beat.consumer
one.beat.consumer

Reputation: 9504

one quick solution here:

http://lab.veille.jp/aspectratio/

Though I'm sure with some better javascript you could do it without using an image placeholder.

Let me know if I'm misunderstanding your question.

Upvotes: 1

Related Questions