Avoid images to stack on mobile site - html

I just started learning coding and I decided to design my website using squarespace and www.rociodelfa.com.
My main problem is that on my inspiration page I have a gallery of images that need to follow a cohesive order and I want to fix the amount of images per line but it is not the same for every line.
When opened on a mobile device the images are stacked. How do I change that?


Check the code I have attached.
* {
box-sizing: border-box;
}
.wrapper {
width: 20%; /* Let's assume you want 5 pictures in a row, so 100%/5 = 20% */
float: left;
padding: 10px;
}
.wrapper img {
width: 100%;
}
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>
<div class="wrapper">
<img src="http://placehold.it/300x300">
</div>

Related

CSS Flex Grid: matching image heights of different aspect ratios?

I have an example of a flex grid below. It takes 2 types of images, one a square and another a 16/9 rectangle. As you can see from the demo below, the heights dont match up due to the different aspect rations. Is there a way to "match" heights and maintain the aspect ratios? Or is this not possible?
Ideally, setting a max height would be great and have the width auto adjust based on that but I can't seem to get that working.
.root {
width: 100%;
max-width: 1200px;
}
.container {
display: flex;
flex-wrap: wrap;
width: 100%;
padding-left: -10px;
padding-right: -10px;
}
.box1 {
max-width: 200px;
flex: 1 0 23%;
padding: 10px;
}
.box2 {
max-width: 300px;
flex: 1 0 33%;
padding: 10px;
}
img {
width: 100%;
}
<div class="root">
<div class="container">
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Aspect_ratio_-_16x9.svg/1200px-Aspect_ratio_-_16x9.svg.png" />
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Aspect_ratio_-_16x9.svg/1200px-Aspect_ratio_-_16x9.svg.png" />
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box2">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/80/Aspect_ratio_-_16x9.svg/1200px-Aspect_ratio_-_16x9.svg.png" />
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
<div class="box1">
<img src="https://play-lh.googleusercontent.com/IeNJWoKYx1waOhfWF6TiuSiWBLfqLb18lmZYXSgsH1fvb8v1IYiZr5aYWe0Gxu-pVZX3=s180-rw"/>
</div>
</div>

How to center multiple images using Bootstrap?

I'm using Bootstrap and trying to make 3 images to be centered. For example, red color boxes are how my images look like, and I want to make it look like blue color boxes:
I tried getting rid of the margin and padding, but I still want some space between the images. Also I tried using { display: table; }, display: table-cell; vertical-align: middle; but somehow it does not do anything to my images... Is there a way to get images to the center with some padding to them in Bootstrap? Below is my code:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
.row {
display: flex;
align-items: center;
justify-content: center;
}
.column {
flex: 33.33%;
padding: 50px;
width: 100%;
}
<div class="album text-center">
<div class="row">
<div class="column">
<img src="images/tour1.jpeg" alt="one" style="width:100%">
</div>
<div class="column">
<img src="images/tour2.jpg" alt="two" style="width:100%">
</div>
<div class="column">
<img src="images/tour3.jpeg" alt="three" style="width:100%">
</div>
<div class="column">
<img src="images/tour1.jpeg" alt="one" style="width:100%">
</div>
<div class="column">
<img src="images/tour2.jpg" alt="two" style="width:100%">
</div>
<div class="column">
<img src="images/tour3.jpeg" alt="three" style="width:100%">
</div>
</div>
</div>
Thank you!

Bootstrap 4 has justify-content-around class which does the job. Consider to use narrower container If you want to obtain smaller gap between images.
PS: You should avoid using col class within image wrappers.
<div class="container">
<div class="row justify-content-around">
<div class="colx"><img src="https://place-hold.it/200x400" alt="" class="img-fluid"></div>
<div class="colx"><img src="https://place-hold.it/200x400" alt="" class="img-fluid"></div>
<div class="colx"><img src="https://place-hold.it/200x400" alt="" class="img-fluid"></div>
</div>
</div>
JSFiddle

Just add this class "justify-content-around".
<div class="album">
<div class="row justify-content-around">
<div class="column">
<img src="images/tour1.jpeg" alt="one" style="width:100%">
</div>
<div class="column">
<img src="images/tour2.jpg" alt="two" style="width:100%">
</div>
<div class="column">
<img src="images/tour3.jpeg" alt="three" style="width:100%">
</div>
<div class="column">
<img src="images/tour1.jpeg" alt="one" style="width:100%">
</div>
<div class="column">
<img src="images/tour2.jpg" alt="two" style="width:100%">
</div>
<div class="column">
<img src="images/tour3.jpeg" alt="three" style="width:100%">
</div>
</div>
</div>

Leading images in flexbox containers

I've been building flexbox containers - actually rows of them - and in some there were leading images. To my surprise something unexpected happens every time I put in one row flexbox containers with leading images and containers of other type (where image doesn't come first).
HTML:
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<span>Bim</span>
</div>
CSS:
.container {
display: inline-flex;
background-color: tomato;
}
.image {
height: 28px;
}
Please see the following example: https://codepen.io/GuRuGu/pen/KeYGwv
I'd really like to know why it happens as I'm at a loss right now.

Alex's answer is probably the best one, as it's more flexible, but this is a quick alternative: if your images are always a fixed height (in the demo they are 28px) you can make the container elements the same height, and align them with vertical-align (because they are inline elements):
.container {
height: 28px;
vertical-align: bottom;
}

I don't know if it's a solution for you, maybe I misunderstood the issue. But in my opinion, if you want to align all containers, you can wrap all containers with a wrapper and add it a display : flex;. With that configuration, maybe you don't need a display: inline-flex on containers anymore. I let them on the code below, because I don't know what are your limitations.
Here is your code with that modification. I add a .supracontainer class on a div wrapper around your containers. You can control the vertical alignment by using align-items flexbox property on supracontainer class.
.container {
display: inline-flex;
background-color: tomato;
align-items: stretch;
}
.supracontainer{
display: flex;
}
.image {
height: 28px;
}
<h2>Leading images</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bom</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bim</span>
</div>
</div>
<h2>Leading image & empty containers</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<span>Bim</span>
</div>
</div>
<h2>Trailing image & empty containers</h2>
<div class="supracontainer">
<div class="container">
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>
<h2>Leading images & trailing images</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>

You can change item order within a flex element using the order property:
.container {
display: inline-flex;
background-color: tomato;
align-items: stretch;
}
.supracontainer{
display: flex;
}
.image {
height: 28px;
order:0;
}
span{
order:1;
}
<h2>Leading images</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bom</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bim</span>
</div>
</div>
<h2>Leading image & empty containers</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<span>Bim</span>
</div>
</div>
<h2>Trailing image & empty containers</h2>
<div class="supracontainer">
<div class="container">
<span>Bam</span>
</div>
<div class="container">
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>
<h2>Leading images & trailing images</h2>
<div class="supracontainer">
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bam</span>
</div>
<div class="container">
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
<span>Bom</span>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
<div class="container">
<span>Bim</span>
<img class="image" src="https://res.cloudinary.com/gurugumawaru/image/upload/v1522765892/FCC_Game_Of_Life_resized_ddofex.png"/>
</div>
</div>

bootstrap columns won't create spaces between them no matter what I try, is it my html structure?

I have searched through almost every question asked about spacing between bootstrap columns but nothing seems to work. I'm thinking it could be a simple rookie mistake with the way I have structured my html/css but I can't seem to figure it out.
I've worked with bootstrap many times before but using a theme, this is my first time however only using a simple bootstrap navbar template with nothing else inside.
.img-container{
position: relative;
display: inline-block;
}
.img-container .overlay{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.1);
}
.img-container:hover .overlay{
display: block;
background-color: rgba(0,0,0,0.6);
}
.img-container .overlay .services-caption{
color: #fff;
font-size: 100px;
position: absolute;
top: 25%;
left: 20%;
}
<!--Services-->
<section class="services">
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="img-container">
<img src="images/services/shop.jpg" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="img-container">
<img src="images/services/shop.jpg" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>
<div class="col-md-4">
<div class="img-container">
<img src="images/services/shop.jpg" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>
</div>
</div>
</section>

Add bootstrap col-md-offset-* class to achieve spacing between columns.
<div class="col-md-4 col-md-offset-1">
The above code will create a gap of 1 column size.

You can try padding, put test class on each <div class="col-md-4 test">
<style>
.test {
padding-bottom: 10px;
}
</style>
<div class="col-md-4 test">
<div class="img-container">
<img src="images/services/shop.jpg" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>

You can add a class called img-responsive. It will make the image responsively.
<div class="col-md-4">
<div class="img-container">
<img src="images/services/shop.jpg" class="img-responsive" alt="...">
<div class="overlay">
<span class="services-caption">Shop</span>
</div>
</div>
</div>

making images appear in uniform sizes [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
In my website, I have a gallery which displays user uploaded images. The problem is , since we dont have a control over the dimensions of the images uploaded by the user, different images are appearing in different dimensions . What is the best approach to make the images appear in uniform sizes using html? or is it best done in the jquery/javascript?

If you don't want to crop your images server-side but still want some level of uniformity then you could use the max-width and max-height properties in CSS and a small snippet of jQuery to do the job for you. This won't change the original image, but will shift it within it's container so it is centered but fills the frame.
You then need to decide the width and height that all thumbnails will be and they will overflow their boundaries centrally aligned and ultimately uniform.
$(window).on("load", function() {
orientateGalleryImages($("#contentGallery").children().children().children("img"));
});
function orientateGalleryImages(images) {
images.each(function() {
var thisImage = jQuery(this);
if(thisImage.height() > thisImage.width()) {
thisImage.addClass("portrait");
} else if(thisImage.width() > thisImage.height()) {
thisImage.addClass("landscape");
} else {
thisImage.addClass("square");
}
});
}
.galleryArea {
background: rgba(0,0,0,0.7);
padding: 10px;
overflow: hidden;
}
.galleryArea .imageWrapper {
position: relative;
width: 10%;
padding-top: 10%;
overflow: hidden;
float: left;
}
.galleryArea .imagePosition {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
.galleryArea .imagePosition img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.galleryArea .imagePosition img.landscape {
max-height: 50%;
height: 50%;
}
.galleryArea .imagePosition img.portrait {
max-width: 50%;
width: 50%;
}
.galleryArea .imagePosition img.square {
max-width: 50%;
max-height: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentGallery" class="galleryArea">
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x250">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x150">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x150">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x150">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x150">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x400">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x150">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x300">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/300x150">
</div>
</div>
<div class="imageWrapper">
<div class="imagePosition">
<img src="http://placehold.it/150x300">
</div>
</div>
</div>
DEMO
HTML:
The HTML is a little long winded, but it is required to offset the image inside the parent.
JS:
The JavaScript looks at the longest edge of the image and adds a class to it of either Portrait, Landscape or Square. These classes specify either a max-width, max-height or both depending on the orientation.

One way of doing this is wrap all images in a 'div'.
HTML :
<div class="img_parent">
<img />
</div>
<div class="img_parent">
<img />
</div>
CSS :
.img_parent{ width:100px; height:100px; overflow:hidden; display:inline-block;}
.img_parent img{ width:100%;}

The solution to this, is to give them fixed heights in css. (example img{ height:100px; } )

When users upload the images, make it automatically crop that image to a specific size eg. 400px x 400px
The demo below is just a crop idea, but you can modify the code to make it automatically crop it to a size of eg 400px x 400px
Croppic example
This is just a thought. Hope you come right.