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
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
Other posts you may like...