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
Hope you found this post useful...
...so please read on! I love writing articles that provide beneficial information,
tips and examples to my readers. All information on my blog is provided free of
charge and I encourage you to share it as you wish. There is a small favour I ask in return however -
engage in comments below, provide feedback, and if you see mistakes let me know.
If you want to show additional support and help me pay for web hosting and
domain name registration,
donations, no matter how small, are always welcome!
Use of any information contained in this blog post/article is subject to this disclaimer
Other posts you may like...