Igor Kromin |   Consultant. Coder. Blogger. Tinkerer. Gamer.

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...
constratiodiv_2.png


When displayed, the results look like this...
constratiodiv_1.jpg


Each of the photos is placed into a DIV with a structure like this...
 HTML
<div class="photo-4x3">
<div class="photo_clip">
<img src="photo.jpg" class="photo_img" width="320" height="240">
</div>
</div>


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...
 CSS
.photo-4x3 {
display: inline-block;
position: relative;
width: 320px;
}
.photo-4x3:after {
padding-top: 75%; /* 4:3 aspect */
display: block;
content: '';
}
.photo_clip {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: #999;
overflow-x: hidden;
overflow-y: hidden;
text-align: center;
}
.photo_img {
width:100%;
height:auto;
top:50%;
transform: translateY(-50%);
-ms-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
left:0;
position:absolute;
}


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.
comments powered by Disqus
Other posts you may like...