Geek Answers Handbook

Set images (both landscape and portrait) to square thumbnails

I'm really trying to get images that are both landscape and portrait orientations, perfect for square gallery thumbnails.

I tried various CSS tricks, but I think I need to maybe use Javascript.

Does anyone know how I can solve this?

EDIT - HTML / CSS can be anything, currently it just prints images using the thumb class, i.e.

<img class="thumb_square" src="/images/uploads/pic.jpg"/> <img class="thumb_square" src="/images/uploads/pic2.jpg"/> <img class="thumb_square" src="/images/uploads/pic3.jpg"/>
+4
source share
2 answers

One possible solution (verified): display each icon in a div . Show the thumbnail using the css background and center property with no-repeat . You must specify the width and height containing div . Set the width and height to the maximum width / height of all your thumbnails. That is, if your thumbnails are 150px * 200px and 200px * 150px, set all divs to 200px * 200px. Then the thumbnails will be centered in the 200px * 200px field, regardless of whether they are in portrait or landscape mode.

Example:

 <div style="width:200px; height:200px; background: url('/images/uploads/pic.jpg') no-repeat center; border:1px solid red;"> </div> <div style="width:200px; height:200px; background: url('/images/uploads/pic2.jpg') no-repeat center; border:1px solid red;"> </div> <div style="width:200px; height:200px; background: url('/images/uploads/pic3.jpg') no-repeat center; border:1px solid red;"> </div>
+6
source

I think this is exactly what you need: No matter how large the images are, you will see the entire height (if the landscape) or the width (if the portrait);

jFiddle: http://jsfiddle.net/ECRc4/3/

HTML:

 <div class="thumb" style="background-image: url('http://placehold.it/250x500')"></div> <br/> <div class="thumb" style="background-image: url('http://placehold.it/500x200')"></div> <br/> <div class="thumb" style="background-image: url('http://placehold.it/100x200')"></div>

CSS

 .thumb{ display:inline-block; width:100px; height:100px; background:center; background-size:cover; }
+4
source

More articles:


All Articles