24-Apr-2016
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
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.
Igor Kromin
Other posts you may like...