24-Apr-2016
NOTE: This article is 3 years or older so its information may no longer be relevant. Read on at your own discretion! Comments for this article have automatically been locked, refer to the
FAQ for more details.
As I work away on my
travelblog.ws project I encounter some interesting problems and creating a
constant ratio DIV has been one of them. What I wanted to do was have photos that I uploaded, no matter whether they are landscape or portrait oriented to be displayed in a uniform manner, all with the same sizes, exactly how
Facebook does it. This is my solution to that.
To demonstrate my code I have uploaded 3 photos, two
portrait and one
landscape...
When displayed, the results look like this...
Each of the photos is placed into a
DIV with a structure like this...
Note in this case I am using a
4:3 ratio div to clip the photo. In addition the photo is both vertically and horizontally centred within the
clipping DIV.
Applying a bit of
CSS gets the desired result...
The size of the resulting
DIV is controlled by setting the
width on the
photo-4x3 class. The
ratio is set by the
padding-top value on the
photo-4x3:after selector. For example 75% means
4:3 ratio (3 ÷ 4 × 100). Using the same calculation a
16:9 aspect ratio is a 56.25% value.
I've put a full example
HTML file
here.
-i
A quick disclaimer...
Although I put in a great effort into researching all the topics I cover, mistakes can happen.
If you spot something out of place, please do let me know.
All content and opinions expressed on this Blog are my own and do not represent the opinions of my employer (Oracle).
Use of any information contained in this blog post/article is subject to
this disclaimer.
Igor Kromin
Other posts you may like...